懒人加载图片如何

Question

我正在开发一个eshop.基于类别的产品页面我推出了一些基于javascript的过滤.但是,如果某个类别包含大量产品,则会出现问题.这个链接有类似的东西我做... http://www.snowandrock.com/sunglasses/snowboard/fcp-category/list?resetFilters=true

这个页面是多么痛苦地慢,超过2mb!

每个产品对我来说需要一半killobyte但图像是问题..所以我正在寻找如何懒加载图像..因为我的页面分页不同于该网站我认为加载仅对页面可见的图像是一个解决方案.然而,探针是如何做到这一点,以便为javascript和非javscript启用的人工作..我唯一的解决方案是将链接存储在css类中,以某种方式存储不可见产品的图像,如果在过滤更改后显示通过javascript图像src ...非JavaScript用户没有这个问题,因为点击过滤器将导航到其他页面...

还有其他想法吗？

Answer 1

四种选择:

以下是三个选项:

使用背景图片

Kangkan的背景答案涵盖了这一点.

如果这对您不起作用,我假设您只需要有关启用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中,您不允许定义自己的属性(尽管实际上没有主要的浏览器关注),因此如果您使用自己的属性,页面将无法验证.

参考文献(w3.org):

• 使用data-*属性嵌入自定义不可见数据
• getElementById
• createElement
• getAttribute
• removeAttribute
• appendChild

偏离主题,但如果您使用jQuery,Closure,Prototype,YUI或其他任何一个JavaScript库来为您平滑粗糙边缘,那么很多这样的东西会变得更容易.(你已经说过你正在使用jQuery.)