Lazy load Images Using jQuery / JavaScript

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

Confused about your business model?

Request a FREE Business Plan.

India +91 ▼

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

Wishlist Add and Remove in WordPress Custom Code for Mobile/Rest API Development
CMS | WordPress | Ideas and Inspirations |

Wishlist Add and Remove in WordPress Custom Code for Mobile/Rest API Development

 In this article, we are going to explain how to add and remove the wishlist using custom code in WordPress and also for mobile application API Development.   $post_id= "current

Read More
F
Software Development |

Foundry ERP Software

Success in the fast-paced world of foundries depends on accuracy, productivity, and economy. Modern production demands are too great for traditional technologies to meet. Foundry ERP software company

Read More
Delete ALL Files and Subfolders from Folder in PHP
PHP |

Delete ALL Files and Subfolders from Folder in PHP

How to delete all files and sub-folders from a folder using php. Like deleting all files of a user without activity for long time, deleting files older than 3 months etc. Whatever the reason, doing su

Read More