A Tiny Javascript Library To Lazy Load Images

Preview:

Description:

A small Javascript library (~2kb minified) used to delay the load of images until they come into view.

How to use it:

Insert images with CSS class of  ‘lazy-load’ into your document. Use src attribute to point to an image loading. Use data-src attribute to point to the image files.

<img class="lazy-load" src="ajax-loader.gif" data-src="1.jpg" alt="">
<img class="lazy-load" src="ajax-loader.gif" data-src="2.jpg" alt="">
<img class="lazy-load" src="ajax-loader.gif" data-src="3.jpg" alt="">
...

A little CSS styles to provide a fade-in transition when your images are scrolled into view.

.lazy-load { opacity: 0; }
.lazy-loaded { opacity: 1; }
.lazy-load,
.lazy-loaded {
  transition: opacity .3s;
  -moz-transition: opacity .3s;
  -ms-transition: opacity .3s;
  -o-transition: opacity .3s;
  -webkit-transition: opacity .3s;
}

Include the lazyload.min.js at the bottom of your document.

<script src="js/lazyload.min.js"></script>