懒加载图片怎么样 [英] Lazy loading images how

问题描述

我正在开发一个eshop。在基于类别i的产品页面上，我提出了一些基于javascript的过滤。然而，如果类别具有很多产品，则出现问题。
此链接有类似的东西...
http： //www.snowandrock.com/sunglasses/snowboard/fcp-category/list?resetFilters=true

这个网页是如何缓慢而结束的2mb !!!

每个产品对我来说需要一半killobyte，但形象是问题..
所以我正在寻找如何延迟加载图像..
由于我的页面有分页不像该网站，我认为加载图像只有页面是可见的是一个解决方案。但是是如何做到这一点，以便为javascript和非javscript启用的人工作$。
唯一的解决方案，虽然是存储链接在css类的图像的不可见的产品，如果显示过滤后更改通过javascript的图像src ...
非javascript用户没有这个问题

解决办法：

方案

四个选项：

以下是三个选项：

背景图片

Kangkan的背景答案

如果这不适合你，我假设你只需要帮助JavaScript启用的东西，因为你说非JavaScript用户将看到不同的页面。

使用插件

分页 已完成 。你在评论中说你使用jQuery。有很多jQuery插件用于分页。找到你喜欢的，并使用它。他们会有不同的质量，所以你想测试他们并检查他们的代码，但我相信有一个体面质量的一个在那里。

服务器端分页

这是主页面根本不加载任何产品或只加载第一页产品的位置。通常，您将所有的产品放入一个容器，如下：

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

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

 < li id ='product-001' 
< div>这是产品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分页

我不知道您如何进行过滤，但如果您有一个包含产品信息的元素，您可以将图片网址存储在 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'; //或者你正在做的任何事情显示
 imgsrc = prod.getAttribute（'data-image'）; 
 if（imgsrc）{
 img = document.createElement（'img'）; 
 img.src = imgsrc; 
 prod.appendChild（img）; //你可能把这个别的地方，但你得到的想法
 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）; //你可能把这个别的地方，但你得到的想法
 prod.removeAttr（'data-image'）; 
} 
  

隐藏时无需再次将其删除，因为图片已显示，这就是为什么我删除属性一旦我们使用它。

我使用数据 - 前缀是验证：从HTML5，您可以定义您的owwn data-xyz 属性，您的页面仍将通过验证。在早期版本的HTML中，您不允许定义自己的属性（虽然在实践中没有主要的浏览器关注），所以如果您使用自己的属性，页面将无法验证。

参考文献（w3.org）：

• 使用数据 - * 属性


• getElementById


• createElement


• getAttribute


• removeAttribute


• appendChild

主题，但如果您使用像 jQuery 这样的JavaScript库， http://code.google.com/closure/library\">保护，原型， YUI 或其他几个，以平滑粗糙的边缘。（你说过你使用jQuery。）

I am developing an eshop .At products page based on category i putted some javascript based filtering. However a problem arises if a category has a lot of products. This link has something similar i do ... http://www.snowandrock.com/sunglasses/snowboard/fcp-category/list?resetFilters=true

How ever this page is painfully slow and is over 2mb !!!

Every product for me needs half killobyte but the image is the problem.. So i am looking how to lazy load images.. Since my page has pagination unlike that site i think that loading images that are visible only to the page is a solution.The probem however is how to do it in order to work both for javascript and non javscript enabled people.. The only solution i though is storing the link at the css class somehow of the image for the non visible products and if shown after filtering change via javascript the image src... Non javascript users dont have this problem as clicking on a filter would navigate them to other page...

Any other idea?

解决方案

Four options:

Here are three options for you:

Use a background image

Kangkan's background answer has this covered.

If that doesn't work for you, I'm assuming you only need help with the JavaScript-enabled stuff, since you said the non-JavaScript users will see a different page.

Use a plug-in

Paging has been done. You've said in a comment that you're using jQuery. There are lots of jQuery plug-ins for paging. Find one you like, and use it. They will be of varying quality, so you'll want to test them out and review their code, but I'm sure there's a decent-quality one out there.

Server-side Paging

This is where the main page loads either without any products at all, or with only the first page of products. Typically you'd put all of the products into a container, like this:

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

Then you'd have the usual UI controls for moving amongst the pages of results. You'd have a server-side resource that returned HTML snippets or JSON-formatted data that you could use to populate that list. I'll use HTML for simplicity (although I'd probably use JSON in a production app, as it would tend to be smaller). Each product entry is its own self-contained 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>

...and then the page returns as many of these as you think is appropriate. You request the page using Ajax and update the product list using JavaScript. Since you've said you use jQuery, this can be be trivially simple:

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

Here's an example prototype (not production code); it fakes the Ajax because JSBin was giving me Ajax issues.

One big page download, then client-side JavaScript paging

I'm not sure how you're doing your filtering, but if you have an element that contains the product information, you can store the image URL in a data-xyz attribute on it:

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

Then when your code makes that visible, you can easily add an img to it:

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');
}

Edit In a comment elsewhere you said you're using jQuery. If so, a translation of the above might look like this:

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');
}

No need to remove it again when hiding, since the image will already be shown, which is why I remove the attribute once we've used it.

The reason I've used the data- prefix is validation: As of HTML5, you can define your owwn data-xyz attributes and your pages will still pass validation. In earlier versions of HTML, you were not allowed to define your own attributes (although in practice no major browser cares) and so if you used your own attribute for this, the page wouldn't validate.

References (w3.org):

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

Off-topic, but a lot of this stuff gets a lot easier if you use a JavaScript library like jQuery, Closure, Prototype, YUI, or any of several others to smooth over the rough edges for you. (You've since said you're using jQuery.)

这篇关于懒加载图片怎么样的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！