Lazy Load Images Using jQuery

jQuery lazy load images is the opposite of pre-loading images. Lazy load delays loading of images in a long web page. pre-loading images on long web page will take too much time to load web page, instead of this we use lazy load on long web page.

Using lazy load images make web page load faster. lazy load jQuery detect which images is in device view port and load only that images. images outside view port wont be loaded before user scroll to them. some time it will reduce server load.

Here i am going to mention some java script and jQuery to lazy load images on web page:

Lazy Load Image Using Java Script

<img data-src="images/example.jpg" alt="" />
 
<script>
//these handlers will be removed once the images have loaded
window.addEventListener("DOMContentLoaded", lazyLoadImages);
window.addEventListener("load", lazyLoadImages);
window.addEventListener("resize", lazyLoadImages);
window.addEventListener("scroll", lazyLoadImages);
 
function lazyLoadImages() {
  var images = document.querySelectorAll("#main-wrapper img[data-src]"),
      item;
  // load images that have entered the viewport
  [].forEach.call(images, function (item) {
    if (isElementInViewport(item)) {
      item.setAttribute("src",item.getAttribute("data-src"));
      item.removeAttribute("data-src")
    }
  })
  // if all the images are loaded, stop calling the handler
  if (images.length == 0) {
    window.removeEventListener("DOMContentLoaded", lazyLoadImages);
    window.removeEventListener("load", lazyLoadImages);
    window.removeEventListener("resize", lazyLoadImages);
    window.removeEventListener("scroll", lazyLoadImages);
  }
}
</script>

above script will detect the image tag with data-src attribute inside the #main-wrapper and convert it to lazy load images. If you notice above java script will trigger when your page will finished loading, resize the page also on scroll the web page. script will add src attribute by taking the image source url from data-src and remove data-src attribute.

Lazy Load Image Using jQuery

Here we have use jQuery with the same concept above we have use in java script.

$(window).on('DOMContentLoaded load resize scroll', function () {;
  var images = $("#main-wrapper img[data-src]");
  // load images that have entered the viewport
  $(images).each(function (index) {
    if (isElementInViewport(this)) {
      $(this).attr("src",$(this).attr("data-src"));
            $(this).removeAttr("data-src");
    }
  })
  // if all the images are loaded, stop calling the handler
  if (images.length == 0) {
    $(window).off('DOMContentLoaded load resize scroll')
  }
})
 
function isElementInViewport (el) {
    var rect = el.getBoundingClientRect();
 
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= $(window).height() &&
        rect.right <= $(window).width()
    );
}

You will also get free jQuery library online for lazy load images.

1. jQuery Lazy Load
2. jQuery Unveil Js
3. jQuery Blazy Js
4. jQuery Lazy Load XT

jQuery Lazy Load

Lazy load script depend on jQuery so you need to first add jQuery and then lazy load images script in your web page footer area or at the end of file.

After this you must need to alter img tag src attribute with data-original and add img path in data-original attribute.

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

You will init lazy load image jQuery by

$(function() {
    $("img.lazy").lazyload();
});

some customize option available for lazy load jquery plugin.

Threshold

Threshold option use to pre-load image before they appear on screen .

$("img.lazy").lazyload({
    threshold : 200
});

Events

In lazy load script two events available click and mouseover.  you will also create the custom events to call lazy load.

$("img.lazy").lazyload({
    event : "click"
});

events allow you to override default settings of lazy load initialization, lazy load default perform when user scroll window. if you use click event this will override default scroll to click event when you will click, images will be load.

$(function() {
    $("img.lazy").lazyload({
        event : "sporty"
    });
});
 
$(window).bind("load", function() {
    var timeout = setTimeout(function() {
        $("img.lazy").trigger("sporty")
    }, 5000);
});

Effects

In default script they have just call show() function, this event you will be override by calling effect option.

$("img.lazy").lazyload({
    effect : "fadeIn"
});

for more information and option please visit: appelsiini jQeury lazy load.

jQuery Unveil Js

jQuery Unveil lazy load have some options like as jQuery lazy load plugin. unveil lazy load have additional option for retina display, you can also load high definition images on retina display different form normal images.

In unveil jQuery plugin you will mention retina img by passing data-src-retina attribute to img tag.

you will initialize unveil script by calling

$(document).ready(function() {
  $("img").unveil();
});

You can see the options available for unveil lazy load on: Unveil Lazy Load images.

jQuery Lazy Load XT

Initialization and alter attribute of img tag is the same as jQuery lazy load images plugin.

The most important and interesting part of jquery lazy load xt is, plugin not only limited to img tag, you will also use this jquery to lazy load your <audio>, <embed>, <frame>, <iframe>, <img>, <video>, <input type="image"> tags.

there is a lots of customization option available with animation effects would you like to add into your web page.

read more about jQuery lazy load XT on: Ressio @ Github