Repository files navigation

lazy-load-images.js is a javascript library that defers loading of non-critical resources at page load time. Instead, these non-critical resources are loaded at the moment of need. Where images are concerned here.

We'd love to have your helping hand on contributions to lazy-load-images.js by forking and sending a pull request!

• Fast loading
• High performance
• Supports all images type
• Responsive images
• Supports all modern browsers Chrome, Firefox, Safari, (IE10+), ... etc.

Let take a look the livelazy-load-images.js demo. And download the libraryhere.

The page must load the CSS and JavaScript.

<link rel="stylesheet" href="css/lazy-load-images.min.css"><script src="js/lazy-load-images.min.js"></script>

lazy-load-images.js is a link to the full-size graphic around the preview.

Note: putlazy-load andreplace classes on the link. And thepreview class on the image.

<a href="full-images-url.png">  <img src="tiny-images-url.png" alt="image" /></a>

Preview image can be very small (20px) in width and saved with high JPEG.

Large image can be any size but should match the preview image (20x15 can be scaled to 200x150, 400x300 or 1600x1200).

<a href="full-images-url.png"   >  <img src="tiny-images-url.png"               alt="Cambodia Angkorwat" /></a>

If you require a image to remain a link, usehref as address then add adata-href attribute with the large image URL.

<a href="http://geekhmer.github.io"    data-href="full-images-url.png"   >  <img src="tiny-images-url.png"               alt="Cambodia Angkorwat" /></a>

Responsive images can be defined in the container link/element using thedata-srcset anddata-sizes attributes which map to the standard srcset and sizes attributes.

<a href="small-images-url.png"    data-srcset="small-images-url.png 400w,  large-images-url.png 800w, extra-large-images-url.png 1600w"    data-sizes="100vw"  >  <img src=""               alt="Cambodia Angkorwat" /></a>

Clickhere to download the library.

We'd love to have your helping hand on contributions to lazy-load-images.js by forking and sending a pull request!

Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)

MIT License