Question

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

我认为这是因为所有图像都是一次加载的...有没有办法让它们只在前一个完成时加载？或者是否有更有效的方式来渲染这样的图像？这是加载'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;';
}

以下是页面中部分加载图像的屏幕截图（这比其他时候发生的要好很多！说真的，有些物种有10到12张图像，而我的电脑需要大约15秒来加载页面，很痛苦）

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

我已经找到了this，有点帮助。非常感谢你， Khanahk

Answer 1

用户浏览器通常会缓存图像，因此用户只有在第一次访问页面时才会遇到缓慢加载。

但是，您应该考虑使用所有正在显示的图像的缩略图。你不需要自己制作这些缩略图，2013年我们有计算机来做这件事。

快速谷歌搜索可能会给你一些软件，可以立即制作所有图片的大小调整副本，或者如果你知道一些编码，你可以制作自己的脚本。例如，您可以在PHP中使用Imagick（请参阅http://php.net/manual/en/imagick.scaleimage.php）。然后只需在服务器上存储两种尺寸的图像，一种用于缩略图，另一种用于更高分辨率。

这样做的一个好处是，您将减少服务器的传出数据（如果您的服务器有很多独特的访问者，由于图像的大小，将会有大量的流量）。此外，您的用户将减少您网站的加载时间（正如您所说，等待加载的图片很无聊）。

你可能会告诉浏览器使用javascript加载图片的顺序，但这不会解决你的问题，主要是你的图片太大了。

Answer 2

我认为你应该：

Serverside：下次您可以使用缓存版本时，需要缓存已生成的图像。您可以为下次使用创建物理图像文件。
客户端：您可以使用库来延迟加载图片
- http://www.appelsiini.net/projects/lazyload
- 您可以实现一个JavaScript函数，该函数在某个特定秒之后加载图像。

图像渲染速度优化

2 个答案: