html - 缩略图在页面滚动时不断重新加载

Question

我的照片页面上的缩略图需要很长时间才能加载，然后如果您向下滚动页面并返回，它们会以某种方式消失并需要重新加载。我在 Windows XP 上使用的是旧版本的 chrome，所以我确定这是我的问题的一半，但是，它仍然在我的手机 (galaxy S5) 上执行此操作。我是新手编码员，所以请对我放轻松大声笑。这是我的网站和照片页面的链接:

http://www.mikemicalizzicontracting.com/photos.html

Answer 1

由于我们没有您的代码，所以我无法真正帮助您解决您的确切问题，但我心情很好，所以我会给您一些提示，让您的网站更快。

优化图片的一些技巧:

1) 调整图片大小

目前您的图片以 207 * 154 显示，这很小，但您可以按原始大小下载它们。您应该调整它们的大小，以便图像的大小(以位为单位)小得多。

您可以使用许多在线工具来做到这一点，或者例如在 bash 中为此编写一个简单的脚本。我认为您会很容易地找到脚本的预制解决方案，或者只需要下载 imagick(我不确定名称)。这种通过 scrip 的解决方案还取决于您的发行版(无论您使用的是 OSX、Windows、Linux..)

2) 首先缓存你的图片

用户等待图像显示总是很痛苦。所以你需要做的是使用浏览器缓存(如果你是新手，你会遇到一些麻烦，但这是值得的)来存储图像数据，然后从这个缓存中显示它们。

所以策略是:

• 如果缓存中有图片，就从那里显示
• 如果没有，从你的服务器下载
• 加载后，将其放入缓存；然后从那里显示它。

3)(更高级)预加载图片

如果您的主页非常容易显示(图片不是很多，要运行的脚本不是很多等)，您可以开始在客户端下载一些图片并将它们存储在缓存中。

此任务应始终是二手任务，这意味着它不应减慢您的用户导航速度。因此，根据用户的行为，您可能需要暂停请求并重新启动它。

如果用户在当前正在为缓存下载图像时进入照片页面，则无需重新开始，继续即可。

最后一个技巧可能需要很长时间才能开发出来，但是当您想要显示质量非常好的图像或只是显示大量图像时，这是一件好事。