#lazy loader

New Post has been published on http://www.htmluse.com/lazysizes-high-performance-lazy-loader-for-images/

lazySizes - High performance lazy loader for images

Download   Demo

This jquery plugin lazysizes is a fast (jankfree) lazyloader for images (including responsive images), iframes and scripts/widgets without any dependency. It may become also your number one tool to integrate responsive images. Due to the fact that it can also automatically calculate the sizes attribute for your responsive images, it helps to seperate layout (CSS) from content/structure (HTML) and makes integrating responsive images into any enviroment simply simple.

  What makes lazysizes so awesome:

lazysizes is different than other lazy image loaders.

Works without any configuration: The script detects any changes to the visibility of an image/iframe automatically no matter whether it becomes visible through a user scroll, an CSS animation triggered through :hover or through any kind of JS behavior (carousel, infinite scroll, AJAX)…

Futureproof: It directly includes standard responsive image support (picture and srcset)

Seperation of concerns: For responsive image support it adds an automatic sizes calculation feature.

Performance: It’s based on high efficient code (runtime and memory) to work jankfree at 60fps.

Works together with low quality image placeholders patterns.

  Browser Support

lazysizes supports the following browsers: IE9+, Firefox 21+, Chrome 27+, Safari 6.1+, iOS Safari 7.0+, Android 4.1+

1. INCLUDE JS FILE

<script src="lazysizes.min.js" async=""></script>

2. HTML

Add the class “lazyload” to your images/iframes/widgets in conjunction with a data-src or data-srcset attribute:

<!-- non-responsive: --> <img src="low-quality-src.jpg" data-src="normal-quality-src.jpg" class="lazyload" />

<!-- responsive example with automatic sizes calculation: --> <img data-sizes="auto" src="lqip-src.jpg" data-srcset="lqip-src.jpg 100w, image2.jpg 300w, image3.jpg 600w, image4.jpg 900w" class="lazyload" />

3. MARKUP API

Add the class lazyload to all img and iframe elements, which should be loaded lazy. Instead of asrc or srcset attribute, use a data-src or data-srcset attribute:

<img data-src="image.jpg" class="lazyload" /> <!-- responsive image: --> <img data-srcset="responsive-image1.jpg 1x, responsive-image2.jpg 2x" class="lazyload" />

lazysizes supports setting the sizes attribute automatically corresponding to the current size of your image. To add support for this add the value auto to the data-sizes attribute:

<img data-sizes="auto" data-srcset="responsive-image1.jpg 300w, responsive-image2.jpg 600w, responsive-image3.jpg 900w" class="lazyload" />

Important: How sizes is calculated: The automatic sizes calculation takes the width of the image and the width of its parent element and uses the largest number of those two calculated numbers. It’s therefore important, that all images with a data-sizes=”auto” attribute are constrained in width by it’s parent element. Otherwise a wrong (too big) sizes attribute will be calculated.

4. RECOMMENDED MARKUP: LQIP

We recommend to use the LQIP pattern (low quality image placeholder): Simply add a low quality image as the src:

<!-- responsive example: --> <img data-sizes="auto" src="lqip-src.jpg" data-srcset="lqip-src.jpg 100w, image2.jpg 300w, image3.jpg 600w, image4.jpg 900w" class="lazyload" /> <!-- or non-responsive: --> <img src="lqip-src.jpg" data-src="image.jpg" class="lazyload" />

The recommended LQUIP pattern has the following advantages. The lquip-src is not hidden from the preload parser and loads very fast, which leads to an extreme fast first impression and in case of legacy browsers/devices as a good enough fallback (IE8 and Android 2 devices as also JS disabled).

5. JS API

lazysizes automatically detects new elements with the class lazyload so you won’t need to call or configure anything in most situations.

JS API – options

Options can be set by declaring a global configuration option object named lazySizesConfig. This object should be defined before the including lazySizes script or at least in the same script file. Here a basic example:

window.lazySizesConfig = lazyClass: 'postbone', // use .postbone instead of .lazyload preloadAfterLoad: true // preload all lazy elements in a download queue ;

Here the list of options:

lazySizesConfig.lazyClass (default: “lazyload”): Marker class for all elements which should be lazy loaded (There can be only one class. In case you need to add some other element, without the defined class, simply add it per JS: $(‘.lazy-others’).addClass(‘lazyload’);)

lazySizesConfig.preloadAfterLoad (default: false): Wether lazysizes should load all elements after the window onload event. (Note: lazysizes will then load all elements using a queue. Only two parallel elements are loaded at the same time. This makes sure that other postboned downloads are also loaded.). Recommendation: On non-mobile devices this should be true.

lazySizesConfig.onlyLargerSizes (default: true): In case a responsive image had the data-sizes=”auto” attribute and the computed new size decreases, lazysizes won’t normally change the sizes attribute to a lower value.

lazySizesConfig.srcAttr (default: “data-src”): The attribute, which should be transformed tosrc.

lazySizesConfig.srcset (default: “data-srcset”): The attribute, which should be transformed tosrcset.

lazySizesConfig.sizesAttr (default: “data-sizes”): The attribute, which should be transformed to sizes.

JS API – events

lazysizes provides two events to modify or extend the behavior of lazysizes.

lazybeforeunveil: This event will be fired on each lazyload element right before of the “unveil” transformation. Can be used to extend the unveil functionality. In case the event isdefaultPrevented the default transformation action will be prevented (see also the ls.unveilhooks.js plugin):

//add simple support for background images: document.addEventListener('lazybeforeunveil', function(e) var bg = e.target.getAttribute('data-bg'); if(bg) e.target.style.backgroundImage = bg; e.target.removeAttribute('data-bg'); e.preventDefault(); , false);

lazybeforesizes: This event will be fired on each element with the data-sizes=”auto” attribute right before the calculated sizes attribute will be set. The event.details.width property is set to the calculated width of the element and can be changed to any number. In case the event isdefaultPrevented the sizes attribute won’t be set.

JS API – methods

lazySizes.unveilLazy(DOMNode)

In case a developer wants to show an image even if it is not inside the viewport thelazySizes.unveilLazy(DOMNode) can be called:

lazySizes.unveilLazy(imgElem);

lazySizes.updateAllSizes()

In case one or more image elements with the attribute data-sizes=”auto” have changed in sizelazySizes.updateAllSizes can be called (For example to implement element queries):

Lazy Image Loader Magento Extensions

Load your images on demand

There are many ways to improve the performance of your magento store. All shop owners will know that product images play an important part. However, there is one problem with this. The more images you have, the slower the site loads and utilizes more bandwidth.

A very good solution to this is to load your images on demand, or what is most commonly known as lazy…