图像预加载：多少钱太多了？

Question

所以我有自己的网页here，这是一个可排序的缩略图页面。加载第一个相关图像时，load()事件会激活每个缩略图。由于我从页面上的隐藏div中抓取<img>标签和文本内容，因此拇指激活会阻止用户点击尚未卸载的图像，然后等待预加载在后台进行。< / p>

电话很简单：

$('#content img:first-child').load(activateThumb).each(function(){
    if(this.complete || this.complete === undefined)this.load();});

.each()捕获所有缓存的图片并手动触发load()事件。工作得很好，是一个快速和精益的网站。现在，随着网站的不断增长，单个HTML文件中有超过100个<img>标签，我想知道是否存在我正在接近的传统限制。我应该将页面拆分为35个不同的html文件吗？我是否应该丢失标签和光滑的预加载效果，以支持服务器端请求图像？

作为一名优秀的程序员，你的直觉是什么？

Answer 1

没有明确的限制。您可以继续按照您在网站上的方式完成尽可能多的图像。

但这只是在等待所有图像被“激活”时用户可能会感到沮丧。

反过来，你可以做的就是分页和分页。显示每页20张图片。这样可以使图像加载速度相对较快。

在加载page1之后，如果用户仍在page1中，您可以开始预取page2。因此，当用户点击page2时，他会看到响应迅速的网站：）

这里没有一条规则。事实上，如果你现在看到谷歌图像，他们会像你做的那样做。

Answer 2

你可以像许多Web 2.0网站那样做：

1. 首先，加载页面当前可见部分显示的图像。
2. 然后在用户向下滚动页面时加载其他图像。