缩略图继续在页面滚动上重新加载

时间:2017-07-29 12:54:56

标签: html css3

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

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

1 个答案:

答案 0 :(得分:0)

我无法帮助您解决您的确切问题,因为我们没有您的代码,但我心情很好,所以我只是给您一些建议来制作您的网站更快。

优化图片的一些提示:

1)调整图片大小

现在,您的图像以207 * 154显示,虽然很小,但您可以以原始尺寸下载它们。你应该调整它们的大小,这样图像的大小(以位为单位)就会低得多。

你可以使用很多在线工具来做到这一点,或者在bash中为此编写一个简单的脚本。我想你会很容易找到一个预先制作的脚本解决方案,或者只需要下载imagick(我不确定这个名字)。这个解决方案也取决于你的发行版(你是OSX,Windows,Linux ......)

2)首先缓存图片

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

所以策略是:

  • 如果缓存中有图像,只需从那里显示
  • 如果没有,请从您的服务器下载
  • 加载后,将其放入缓存中;然后从那里显示它。

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

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

此任务应该始终是一个二手任务,这意味着它不应该减慢您的用户导航速度。因此,根据用户的操作,您可能需要暂停请求并再次启动它。

如果用户在图片当前正在下载缓存时进入照片页面,则无需再次启动它,只需继续。

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