Jquery 优化网站中的加载时间（同一页面上有200个产品图片）

我担心的一个小问题，加载时间上的网站

目前，我正在一个网站上工作，该网站在同一页面上有200多个产品图像（有一个jQuery过滤器的使用，使它们根据过滤器进行过滤），我不确定是最好的方式，因为页面加载需要时间，图像可能会中断或减慢浏览器

另一方面，我认为在加载所有图像之前，“加载页面”或某种jQuery可能是一个很好的解决方案

（还有一个障碍，因为图像是针对平板电脑（而非视网膜）进行优化的，因此图像可能比电脑屏幕上正常显示的图像大）

任何类型的解决方案？

使用

---

和其他类似的jquery插件有两种常见的解决方案

页面（或软页面） 您可以一次加载一页左右的图像，并具有“下一步”和“上一步”按钮。测量用户在一个页面上的平均时间，并在该时间前后开始加载第二个页面。一旦他们点击按钮，你可以淡出当前页面，然后淡入下一页

优点：

• 减少滚动
• 比多页更好
• 冷转变
• 禁用JS时可以回退到简单的页面导航（如果在服务器上正确实现）

缺点：

• 需要按下按钮（页面太多时会让人讨厌）

无限滚动 有许多插件允许“无限滚动”。基本上，您可以到达页面的底部，它会从您的服务器加载更多图像

优点：

• 触摸设备针对滚动进行了优化
• 无需点击按钮

缺点：

• 大多数都会等到你在页面底部，这会导致你在下一批图像加载之前等待几秒钟
• 除非实现pushState，否则不等待加载所有其他图像就无法轻松访问特定页面

---

我开始开发一个插件，优雅地处理无限滚动。目前，它比我见过的其他解决方案略好

用法：

为您的图像创建一个模板

    <span id="imageTemplate">
        <img src="" alt="my image"/>
    </span>

您可能会使用循环。比如说

for (var i=0; i<1000; i++) {
    var padding = "0000".slice(i.toString().length);
    images.push(["img/kitten", padding, i].join(""));
}

卷轴

我的待办事项列表：

• 执行动量加载大小
• 性能测试
• 相容性
• 谷歌闭包编译器集成（WIP）
• （可能）允许滚动div，而不是窗口

---

我认为用户不想等到所有图像都加载后再查看页面。如果分页不是一个选项，如果请求者不是一个table，您可能希望呈现更小版本的图像。我认为这是一个好主意，但是优化网站会发生什么呢？我只是有相同的图像两次（取决于设备）。完全不确定根据目前的技术状况，磁盘空间不应该是一个问题。当然，这取决于您的用例。但是对于我的网站来说，大约有100000张图片x 2个版本，它运行得很好？因为对于你来说，这么多的图像应该是一个优化问题。顺便问一下，你能分享任何演示或真实网站的url来检查它是如何工作的吗？这是一个只有链接的答案。试着详细说明你的答案，看看延迟加载有多大帮助。嘿，Amit，谢谢你的回答。我在查这个！顺便说一句，正如纳伦德拉所指出的，对它的功能/工作原理进行一点解释会很好。嘿！感谢您的支持，但我似乎需要一页完整的产品，所以第一个选项不可用。第二个似乎足够解决问题，但我不确定等待下一批图像出现的时间。使用一些插件来显示一个加载条，直到web完全加载，怎么样？也许有点烦人？直接展示产品更好吗？我只是害怕那些“酷”的东西…我建议一次加载两个屏幕高度的产品。对于大多数屏幕，这大约是30个缩略图和简短的描述。在移动设备上，它的数量更少，这有利于节省数据使用。当用户下方有一个页面时，加载另一个页面。如果用户在加载下一组图像之前点击了内容的底部，那么下次做2个屏幕，然后用合理的上限做3个屏幕。这样，花时间的人就不会下载过多的图片。那些快速滚动的人不会被耽搁太多。我要写一个intelli scroll插件，完成后我会再添加一条评论。太好了，我会等待你的回复answer@XaviAlsina，我有一个阿尔法质量预览它可以做什么。我仍在添加一些功能（问题中列出）并提高性能。它在1000图像测试集（200px x 150px ish）上运行良好。

for (var i=0; i<1000; i++) {
    var padding = "0000".slice(i.toString().length);
    images.push(["img/kitten", padding, i].join(""));
}

var $imageTemplate = $('#imageTemplate');
$imageTemplate.inteliscroll.addImages(images);
$imageTemplate.inteliscroll();