High Performance Image Lazy Loader - acLazyLoadImage.js

acLazyLoadImage.js is a responsive, performance-focused image lazy loader plugin implemented in jQuery.

The plugin automatically replaces the placeholder with the original image when the container is scrolled into view.

It also has the ability to handle images loading on multiple screen resolution that detects the user's screen size and serves the right image based on the viewport.

How to use it:

1. Insert images into the following data attributes:

• data-src: original image
• data-src-small: image for small screen
• data-src-big: image for large screen

<div class="img_lazy"
     data-src="original.jpg"
     data-src-small="small.jpg"
     data-src-big="large.jpg">
</div>

2. Insert the minified version of the jQuery acLazyLoadImage.js after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="acLazyLoadImage.min.js"></script>

3. Call the plugin on the DIV container. That's it.

$( document ).ready(function() {
  $( ".img_lazy" ).ImgLazyLoad();
});

4. Specify the breakpoints for the responsive image delivery.

$( ".img_lazy" ).ImgLazyLoad({
  mobile: 640,  
  qhd: 1680
});

5. Specify the top offset the browser starts loading the original image.

$( ".img_lazy" ).ImgLazyLoad({
  offset: -150
});

6. Determine how often the plugin checks the visibility.

$( ".img_lazy" ).ImgLazyLoad({
  time: 200
});

---

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