0

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

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

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

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

有什么解决办法吗？

4

2 回答 2

1

有两种常见的解决方案。

页面（或软页面）

您可以一次加载大约一页图像，并具有 Next 和 Prev 按钮。测量用户在一个页面上的平均时间，然后在该时间左右开始加载第二个页面。一旦他们单击按钮，您就可以淡出当前页面，并淡入下一个页面。

优点：

  • 减少滚动
  • 比多页好
  • 很酷的过渡
  • 禁用 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 Closure 编译器集成 (WIP)
  • （也许）允许滚动 div，而不是窗口
于 2013-08-30T06:57:24.057 回答
0

使用延迟加载

延迟加载

和其他类似的jquery插件

于 2013-08-30T06:50:26.343 回答