Garfield is a super simple jQuery lazy load library for images. It supports srcset and sizes too.
It uses scrollMonitor to detect images before they enter the viewport and loads them. Lazy. Load. Easy.
bower install garfield
Three quick start options are available:
- download the latest release
- clone the repo:
git clone https://github.com/andrezimpel/garfield.git - install with bower:
bower install garfield
First inlcude the assets.
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script src="path/to/bower_components/scrollMonitor/scrollMonitor.js"></script>
<script src="path/to/bower_components/garfield/dist/js/garfield.js"></script>
<link href="path/to/bower_components/garfield/dist/css/garfield.css" rel="stylesheet">Than replace src and srcset with data-src and data-srcset. Garfield will duplicate those attributes and remove the data- prefix. The image(s) will load the images before they enter the viewport. The class garfield will hide the empty image tag if javascript is disabled and the noscript part will display the image as usual. DON'T MISS THAT!
<img data-behavior="garfield" class="garfield" data-src="/path/to/image" data-srcset="/path/to/imgage 2x" alt="Image Description">
<noscript>
<img src="/path/to/image" srcset="/path/to/imgage 2x" alt="Image Description">
</noscript>At least, execute the javascript.
$(document).ready(function(){
$('img[data-behavior="garfield"]').garfield();
});Instead of using data-behavior="garfield" you could also add data-behavior="garfield-lasagne" to the image. You won't need to add the executing javascript by yourself. Garfield does that! Easy.
Andre Zimpel
Hit me up if you want to join!
Code and documentation copyright 2011-2015 andre zimpel. code released under the MIT license.