延迟加载图像的方式

Question

我正在开发一个eshop。在基于类别的产品页面上，我放置了一些基于javascript的过滤器。但是，如果类别具有很多产品，则会出现问题。该链接具有与我相似的功能…

这个页面多么缓慢，却超过2mb ！！！

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

还有其他想法吗？

Answer 1

这是您的三个选择：

使用背景图片

如果这对您不起作用，我假设您仅需要有关启用JavaScript的内容的帮助，因为您说过非JavaScript用户会看到其他页面。

使用插件

分页 已完成
。您在评论中说过您正在使用jQuery。有很多用于分页的jQuery插件。找到您喜欢的一个，然后使用它。它们的质量各不相同，因此您需要对其进行测试并检查其代码，但是我敢肯定那里有质量不错的代码。

服务器端分页

在这里可以加载主页，而根本不加载任何产品，或者仅加载产品的第一页。通常，您会将所有产品放入容器中，如下所示：

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

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

<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");

这是一个示例原型（不是生产代码）；它伪造了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中，不允许您定义自己的属性（尽管实际上没有主要的浏览器关心），因此，如果为此使用了自己的属性，则该页面将无法验证。

）