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

File Size: 4.91 KB
Views Total: 2185
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

How to use it:

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

<script src=""
<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-style="border: 1px solid #000"
        data-retina="/path/to/[email protected]"
        data-alt="Image Alt">

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

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

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




  • bugfix


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