Lazy load your images without the overhead of a framework. Optionally, send mobile-optimized images to smaller screens. Tested on IE7+, Firefox, Chrome, Safari, iOS.
Based on code from Mike Pulaski.
1) Include lazyload.min.js or inline it.
2) 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="https://github.com/kaizau/Lazy-Load-Images-without-jQuery/raw/gh-pages/lazy.jpg" data-src-mobile="lazy-small.jpg" src="https://github.com/kaizau/Lazy-Load-Images-without-jQuery/raw/gh-pages/blank.gif" />
<noscript><img src="https://github.com/kaizau/Lazy-Load-Images-without-jQuery/raw/gh-pages/lazy.jpg" /></noscript>3) Add CSS3 magic 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; }