Lazy loading images how

Question

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?

Answer 1

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.)