javascript - 延迟加载图像如何

Question

我正在开发一个 eshop。在基于类别的产品页面上，我放置了一些基于 javascript 的过滤。但是，如果一个类别有很多产品，就会出现问题。 这个链接有类似的东西我做... http://www.snowandrock.com/sunglasses/snowboard/fcp-category/list?resetFilters=true

这个页面怎么会这么慢而且超过 2mb !!!

对我来说，每个产品都需要半千字节，但图像是问题所在。 所以我正在寻找如何延迟加载图像.. 由于我的页面与该站点不同，我认为加载仅对页面可见的图像是一种解决方案。然而，probem 是如何做到这一点，以便同时适用于 javascript 和非 javscript 启用的人.. 我唯一的解决方案是在 css 类中以某种方式存储不可见产品图像的链接，如果在通过 javascript 过滤更改图像 src 后显示... 非 javascript 用户没有这个问题，因为单击过滤器会将他们导航到其他页面...

还有其他想法吗？

Answer 1

四个选项:

这里有三个选项供您选择:

使用背景图片

Kangkan's background answer涵盖了这个。

如果这对您不起作用，我假设您只需要支持 JavaScript 的帮助，因为您说过非 JavaScript 用户会看到不同的页面。

使用插件

分页已完成。您在评论中说过您正在使用 jQuery。有很多用于分页的 jQuery 插件。找到一个你喜欢的，然后使用它。它们的质量参差不齐，因此您需要对它们进行测试并查看它们的代码，但我确信那里有一个质量不错的。

服务器端分页

这是主页加载的地方，要么根本没有任何产品，要么只有产品的第一页。通常，您会将所有产品放入一个容器中，如下所示:

<ul id='productList'>
</ul>

然后您将拥有用于在结果页面之间移动的常用 UI 控件。您将拥有一个服务器端资源，该资源返回可用于填充该列表的 HTML 片段或 JSON 格式的数据。为简单起见，我将使用 HTML(尽管我可能会在生产应用程序中使用 JSON，因为它往往更小)。每个产品条目都是它自己的独立 block :

<li id='product-001'>
  <div>This is Product 001</div>
  <img src='http://www.gravatar.com/avatar/88ca83ed97a129596d6e8dd86deef994?s=32&d=identicon&r=PG'>
  <div>Blurb about Product 001</div>
</li>

...然后页面会返回您认为合适的数量。您使用 Ajax 请求页面并使用 JavaScript 更新产品列表。既然您已经说过您使用 jQuery，那么这可能非常简单:

$('#productList').load("/path/to/paging/page?start=X&count=Y");

这是一个 example prototype (不是生产代码)；它伪造了 Ajax，因为 JSBin 给我 Ajax 问题。

一个大页面下载，然后客户端JavaScript分页

我不确定您是如何进行过滤的，但是如果您有一个包含产品信息的元素，您可以将图像 URL 存储在其上的 data-xyz 属性中:

<div id='product-123' data-image='/images/foo.png'>

然后当您的代码使其可见时，您可以轻松地向其添加 img:

var prod, imgsrc, img;
prod = document.getElementById('product-123');
prod.style.display = 'block'; // Or whatever you're doing to show it
imgsrc = prod.getAttribute('data-image');
if (imgsrc) {
    img = document.createElement('img');
    img.src = imgsrc;
    prod.appendChild(img); // You'd probably put this somewhere else, but you get the idea
    prod.removeAttribute('data-image');
}

编辑 在其他地方的评论中，您说您正在使用 jQuery。如果是这样，上述内容的翻译可能如下所示:

var prod, imgsrc, img;
prod = $('#product-123');
prod.show();
imgsrc = prod.attr('data-image');
if (imgsrc) {
    $("<img/>").attr('src', imgsrc).appendTo(prod); // You'd probably put this somewhere else, but you get the idea
    prod.removeAttr('data-image');
}

隐藏时不需要再次删除它，因为图像已经显示，这就是为什么我在使用它后删除该属性。

我使用 data- 前缀的原因是验证:从 HTML5 开始，您可以定义自己的 data-xyz 属性，您的页面仍将通过验证.在早期版本的 HTML 中，不允许您定义自己的属性(尽管实际上没有主流浏览器关心)，因此如果您为此使用自己的属性，页面将无法验证。

引用文献(w3.org):

• Embedding custom non-visible data with the data-* attributes
• getElementById
• createElement
• getAttribute
• removeAttribute
• appendChild

题外话，但是如果您使用像 jQuery 这样的 JavaScript 库，这些东西的很多会变得容易得多, Closure , Prototype , YUI , 或 any of several others为您平滑粗糙的边缘。(您已经说过您正在使用 jQuery。)