用大量图像填充网页，滚动缓慢。答案

【问题标题】：Populating webpage with lots of images, sluggish scrolling.用大量图像填充网页，滚动缓慢。
【发布时间】：2012-06-23 21:54:10
【问题描述】：

在我的页面上，我填充了很多图像，它们不是超高分辨率，但我聚合了图像，所以我没有以较小的尺寸存储。当我开始在页面上放很多东西时，它会变得迟缓。我能做些什么来解决这个问题吗？像某种即时图像压缩？

【问题讨论】：

【解决方案1】：

您是否研究过延迟加载图像的技术？ http://www.appelsiini.net/projects/lazyload

看起来问题是因为您使用全分辨率图片来显示缩略图。这是一场表演的噩梦！您可能会从阅读中受益：

【讨论】：

这个解决方案的问题是，一旦所有的图像都被加载，它们最终会被加载，我仍然会得到糟糕的性能。
您是以全尺寸显示所有图像，还是使用width 和height 属性来显示它们？也许看看TimThumb？
说实话，我不知道它们是否完全显示，它们存储的 div 容器大小有限。（我不知道尽管不是全尺寸，但整个图像是否仍在加载）。这个 timThumb 可能是我需要的东西。
如果您可以发布相关网页的链接，我们会更轻松地为您提供帮助。
75.117.215.212/newgameplus/TEST/ 好的，我的测试情况：在第二个搜索栏中，输入“最终幻想 VIII”和“最终幻想 VII”，然后在短暂的加载时间后，开始点击'追加新项目'。当页面填满时，您会注意到性能下降。是的，很抱歉这太尴尬了，但这是我的实时测试代码。

【解决方案2】：

您确实需要对这些图像进行大拇指操作以使其更快。同时下载所有高分辨率图像是没有意义的。

【讨论】：

我同意，但在实际获取数据之前我不知道如何获得大拇指。而且似乎下面的 TimThumb 脚本至少会出于性能目的对其进行压缩。
这些图片来自哪里？它们总是从其他来源随机获取还是您每次都重复使用它们？如果是后者，您可以编写一些脚本来制作它们的拇指，然后您将使用它们显示在页面上。每当有人点击缩略图时，就会加载高分辨率版本。问题解决了。