A Tiny Javascript Library To Lazy Load Images

Category: Javascript , Loading | July 2, 2014
Views Total:2,616 views
Official Page:Go to website
Last Update:July 2, 2014


A Tiny Javascript Library To Lazy Load Images


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

You Might Be Interested In:

Leave a Reply