GARFIELD

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.

Just Do it

bower install garfield

Quick Start

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

Usage

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();
});

Autoload

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.

Creators

Andre Zimpel

• https://twitter.com/andrezimpel
• https://github.com/andrezimpel

Hit me up if you want to join!

Copyright and License

Code and documentation copyright 2011-2015 andre zimpel. code released under the MIT license.