Retina-ready Image Lazy Loader Plugin - jQuery lazy-images

lazy-images is a jQuery lazy loader plugin to boost the page load speed by delay the loading of images until they're scrolled into view.

Supports retina images (@2x) and custom CSS styles.

See also:

• 10 Best Lazy Loading jQuery Plugins
• Top 10 Lazy Loading JavaScript Libraries

How to use it:

1. Load the minified version of the jQuery lazy-images plugin after loading JQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous">
</script>
<script src="./js/lazy-images.min.js"></script>

2. Wrap the images into any elements as follows. Make sure the container element has the class name of "lazy-images".

• data-class: additional CSS class(es)
• data-style: custom CSS styles
• data-image: path to the image
• data-retina: path to the retina image
• data-alt: alternative text

<div class="example">
  <span class="lazy-image" 
        data-class="yourClass" 
        data-style="border: 1px solid #000"
        data-image="/path/to/image.jpg" 
        data-retina="/path/to/[email protected]"
        data-alt="Image Alt">
  </span>
</div>

3. Inert the original image to the noscript tag to loading the image normally when your users have disabled scripts in their browser.

<noscript>
  <img class="yourClass" src="/path/to/image.jpg" alt="Image Alt">
</noscript>

4. Call the plugin on the top container. Done.

$(document).ready(function(){
  $(".example").lazyImages();
});

Changelog:

2020-02-11

• bugfix

2019-09-28

• update heights on lazyload activation

---

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