Lazy load Images Using jQuery / JavaScript

Lazy load Images Using jQuery / JavaScript

lazy load images using jquery

Lazy Load is a jQuery script written in JavaScript. It delays the loading of images on long web pages. All the images are loaded one by one while the page is getting scrolled. Images outside of viewport visible part of a web page won't be loaded before user scrolls to them.

Replace image src with blank image and add image source in data-src

lazy load images using jquery


Add this Javascript function in footer of the page this simple script helps in lazy loading of image

function loadImage (el, fn) {
    var img = new Image()
      , src = el.getAttribute('data-src');
    img.onload = function() {
      if (!! el.parent)
        el.parent.replaceChild(img, el)
      else
        el.src = src;
      fn? fn() : null;
    }
    img.src = src;
  }
  function elementInViewport(el) {
    var rect = el.getBoundingClientRect()
    return (
       rect.top    >= 0
    && rect.left   >= 0
    && rect.top <= (window.innerHeight || document.documentElement.clientHeight)
    )
  }
    var images = new Array()
      , query = $q('img.lazy')
      , processScroll = function(){
          for (var i = 0; i < images.length; i++) {
            if (elementInViewport(images[i])) {
              loadImage(images[i], function () {
                images.splice(i, i);
              });
            }
          };
        }
      ;
    // Array.prototype.slice.call is not callable under our old browsers 
    for (var i = 0; i < query.length; i++) {
      images.push(query[i]);
    };
    processScroll();
    addEventListener('scroll',processScroll);
}(this)

The above Javascript function will help you to load images slow when the pages is scrolled. this will help webpage to load fast and prevent may HTTP request. page speed with be increased. 
           

Tags

  • lazy load images jquery codepen

  • lazyload jquery example

  • lazy load images example

  • lazy loading content on scroll jquery
  • lazyload w3school
  • lazy loading javascript on a scroll

  • load images after page load

  • lazyload background images

Related Posts

Animation Development Company

Animation Development Company

Blazingcoders is an Animation development company in India. We provide animation services to various type of industries. The animation is a creative concept of graphic representation within the sequen

Read More
Efficient Lead Generation for Schools: Best Software Solutions for 2024

Efficient Lead Generation for Schools: Best Software Solutions for 2024

Schools are constantly looking for efficient methods to draw in potential students in an increasingly competitive educational environment. Reaching a larger audience is only one aspect of effective le

Read More
What’s the Difference Between Old SEO and New SEO?

What’s the Difference Between Old SEO and New SEO?

If you’ve been in the digital marketing world for a while—or even just starting out—you might be wondering: Is SEO still the same as it used to be? Or has it evolved so much that old

Read More