Image Lazy Loader Plugin for jQuery - lazyload

File Size: 8.94 KB
Views Total: 12478
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Image Lazy Loader Plugin for jQuery - lazyload

The page loading time, as you know, is one of the most important factors for google ranking. The less time to load, the better it is for the SEO.  lazyload is such a jQuery/JavaScript plugin that delays loading of many large images in long web pages to reduce the load time.  It supports fade-in effect, timeout loading effect, trigger loading, gazillion images and wide container. Depending on the Intersection Observer API.

This principle has been used for many years in a wide variety of social media services like pinterest, facebook, twitter and etc. You'd better Use this plugin with a Back To Top Plugin such as Smooth Page Scroll to Top with jQuery.

How to use it(v2.x):

1. Include jQuery library and lazyload.js

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/lazyload.js"></script>

2. Define the path to the image in the data-src attribute.

<!-- grey.gif is a 1×1 pixel grey gif, used as a placeholder image -->
<img class="lazyload" src="img/grey.gif" data-src="img/example.jpg"  width="640" heigh="480">

3. The plugin also supports Responsive Images.

<img class="lazyload"
     src="thumbnail.jpg"
     data-src="normal.jpg"
     data-srcset="normal.jpg 1x, retina.jpg 2x">

4. Call the function on the image and done.

$("img.lazyload").lazyload();

4. Default plugin settings.

$("img.lazyload").lazyload({
  src: "data-src",
  srcset: "data-srcset",
  selector: ".lazyload",
  root: null,
  rootMargin: "0px",
  threshold: 0
});

Change logs:

v2.0.0rc2 (2019-04-12)

  • IE11 does not support arrow functions
  • Add missing header block

v1.9.7 (2015-08-28)

v1.9.5 (2015-04-20)

  • version update.

v1.9.4 (2015-04-02)

  • version update.

v1.9.4 (2015-02-26)

  • version update.

v1.9.3 (2014-01-27)

  • version update.

v1.9.2 (2014-01-15)

  • version update.

v1.9.1 (2013-11-17)

  • Fix iOS5 detection for iPhone (Berik Visschens)
  • Use .attr() instead of .data() since jQuery caches values when using latter. Fixes #37, #144 and #101 (Lorenz an Mey).
  • Do not add data:uri placeholder for non image elements.

This awesome jQuery plugin is developed by tuupola. For more Advanced Usages, please check the demo page or visit the official website.