优化网站加载时间(同一页面上有200多个产品图片)

Question

我担心在网站上加载时间的小问题。

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

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

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

有什么解决方案吗？

Answer 1

有两种常见的解决方案。

页面（或软页面）

你可以一次加载大约一页的图像，并有"下一页"one_answers"上一页"按钮。测量用户在一个页面上的平均时间，并在该时间前后开始加载第二个页面。一旦他们点击按钮，你就可以淡入当前页面，然后淡入下一个页面。

优点：

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

缺点：

• 需要按下按钮（当有很多页面时会很烦人）

无限滚动

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

优点：

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

缺点：

• 大多数都要等到你到达页面底部，这会导致你在加载下一批图像之前等待几秒钟
• 除非实现pushState，否则在不等待加载所有其他图像的情况下访问某个页面是不容易的

---

我开始开发一个插件来优雅地处理无限滚动。目前，它比我看到的其他解决方案稍微好一点。

无遗嘱者

用法：

1. 为您的图像创建模板

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

2. 添加一些图像

   var images = ['img/img0001', 'img/img...'];
   

   您可能会使用循环。例如

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

3. 使用插件初始化插件

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

4. 滚动

我的待办事项列表：

• 实施动量加载大小
• 性能测试
• 兼容性
• Google闭包编译器集成（WIP）
• （也许）允许滚动div，而不是窗口

Answer 2

使用LazyLoad

LazyLoad

和其他类似的jquery插件