图像渲染速度优化

问题描述：

I've got an application I'm building with PHP which calls photos from a database according to however many images there are for a given plant species. I have the script resize the otherwise large photos to 100x100. This process REALLY takes a bite out of page load time and my computer's CPU gets up to 100% and is working quite hard.

I think it's because all images are loading at once... Is there a way to have them load only when the previous one is finished? Or is there a more efficient way of rendering images like this? Here is the snippet that loads 'em:

$imagesArray = explode(", ",$images);
unset($imagesArray[count($imagesArray)-1]); // get rid of the last array key which is blank.
echo '<tr><td>Images:</td><td>';
foreach ($imagesArray as $imgloc)
{
  echo '<a target="_blank" href="plant_images/'.$imgloc.'"><img src="plant_images/'.$imgloc.'" width="100" height="100" alt="'.$row[2].'" title="'.$row[2].'" /></a>&nbsp;';
}

Here is a screenshot of a partially loaded image in the page (this is a lot better than what happens other times! Seriously, some species have 10-12 images and my computer takes about 15 seconds to load the page, painfully)

http://www.captainscall.site11.com/temp_stuff/slow-img.png

I found this already, mildly helpful. Thank you kindly, Khanahk

我有一个用PHP构建的应用程序，根据那里的许多图像调用数据库中的照片适用于特定的植物物种。我有脚本将其他大照片调整为100x100。这个过程真的可以减少页面加载时间，我的计算机的CPU达到100％并且工作非常努力。 p>

我认为这是因为所有图像都在加载... 有没有办法让它们只在前一个完成时加载？或者是否有更有效的方式来渲染这样的图像？这是加载'em的片段： p>

  $ imagesArray = explode（“，”，$ images）; 
unset（$ imagesArray [count（$ imagesArray）-1]  ）;  //删除最后一个空格的数组键。
echo'＆lt; tr＆gt;＆lt; td＆gt;图片：＆lt; / td＆gt;＆lt; td＆gt;'; 
 
 
 
 
 
 
 
（$ imagesArray as $ imgloc）
 
 \  n echo'＆lt; a target =“_ blank”href =“plant_images /'.$ imgloc。'”＆gt;＆lt; img src =“plant_images /'.$ imgloc。'”width =“100”height =“100”  alt =“'。$ row [2]。'”title =“'。$ row [2]。'”/＆gt;＆lt; / a＆gt;＆amp; nbsp;'; 
} 
  code>  
 
 以下是页面中部分加载图像的截图（这比其他时候发生的要好很多！说真的，有些物种有10到12张图像而我的电脑大约需要15秒 痛苦地加载页面 p> 
 
 
   http://www.captainscall.site11.com/temp_stuff/slow-img.png   p> 
 
 
我发现这个已经，温和的帮助。
谢谢你，
Khanahk  p> 
  div>

答

The users browser will usually cache the images, so that the user will only experience slow loading the first time he/she visits the page.

However, you should consider having thumbnails of all the images that are being displayed. You don't need to make these thumbnails your self, in 2013 we have computers to do that.

A quick google search will probably give you some software that can make resized copies of all your pictures in no time, or if you know some coding you can make your own script to to this. You can for instance use Imagick in PHP (see http://php.net/manual/en/imagick.scaleimage.php). Then just store two sizes of the images on your server, one for thumbnails and one set with higher resolution.

One advantage of doing this is that you will decrease the outgoing data from your server (if your server has a lot of unique visitors, there will be a lot of traffic due to the size of the images). Also your users will experience less loading time for your site (as you said, waiting for images to load is boring).

You could probably tell the browser with javascript in what order to load the images, but that wouldn't solve your problem, which mainly is that your images are too big.

答

I think you should:

Serverside: you need to cache an image if it already generated, the next time you can use the cache version. You can create a physical image file for next used.
Client side: you can use library to lazy load your image
- http://www.appelsiini.net/projects/lazyload
- You can implement a JavaScript function that load image after some specific second.

图像渲染速度优化

相关推荐