A totally lame name for a totally useful script.
View the Project on GitHub kaizau/Lazy-Load-Images-without-jQuery
Lazy load your images without the overhead of a framework. Optionally, send mobile-optimized images to smaller screens. Tested on IE7+, Firefox, Chrome, iOS.
Based on code from Mike Pulaski.
Include lazyload.min.js
or inline it.
Add .lazy-load
and data-src
to each of your <img>
tags. Optionally add data-src-mobile
, a placeholder src, and a fallback image.
<img class="lazy-load" data-src="lazy.jpg" data-src-mobile="lazy-small.jpg" src="blank.gif" />
<noscript><img src="lazy.jpg" /></noscript>
Add CSS3 for an animated fade-in.
.lazy-load, .lazy-loaded {
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
opacity: 0;
}
.lazy-loaded { opacity: 1; }
Open up your Developer Tools / Firebug to peek at the network.
On mobile, image order will be swapped (different images used).
Images courtesy of NASA.