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

Question

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

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

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

（此外，由于图像针对平板电脑（非视网膜）进行了优化，因此图像可能比计算机屏幕上的正常显示更大。）

任何解决方案？

谢谢！

Answer 1

有两种常见的解决方案。

页面（或软页面）

您可以同时加载一组图像，并具有“下一个”和“上一个”按钮。测量用户在一个页面上的平均时间，并开始在该时间周围加载第二页。单击按钮后，您可以淡出当前页面，然后淡入下一页。

优点：

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

缺点：

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

无限滚动

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

优点：

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

缺点：

• 大部分时间等到你在页面底部，这会导致你在下一批图像加载前等待几秒钟
• 除非您实施pushState，否则无需等待所有其他图片加载即可轻松访问某个页面

---

我开始使用插件来优雅地处理无限滚动。目前，它比我见过的其他解决方案略胜一筹。

inteliscroll

用法：

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 Closure Compiler集成（WIP）
• （可能）允许滚动div，而不是窗口

Answer 2

使用LazyLoad

LazyLoad

和其他类似的jquery插件