Skip to content

Garfield is a super simple jQuery lazy load library for images. It supports srcset and sizes too.

License

Notifications You must be signed in to change notification settings

andrezimpel/garfield

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

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

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.

About

Garfield is a super simple jQuery lazy load library for images. It supports srcset and sizes too.

Resources

License

Stars

Watchers

Forks

Packages

No packages published