imgr

imgr is a lightweight mobile optimised jquery plugin to lazy load images as a background image or normal image element. The default behavior is to load images as user scrolls on the screen and element becomes visible.

####How it works? The plugin checks the position of an image or a div (to be loaded as background image) once on every touchmove (for touch devices) or mousewheel(non touch devices) event. The position is checked with respect to the window or the visual viewport and both vertical and horizontal visibility is taken into account. If the element is within the viewport bounds the image is loaded.

####How to use it?.

An image element or an element with background image must be assigned a class "imgr" with its data-src attribute set to the url of the image.

<img class='imgr' data-src='imageurl'/>
	OR
<div class='imgr' data-src='imageurl'>Background image</div>

In your javascript you can call the plugin in two ways.

$("rootSelector").imgr(options) 
//rootSelector is the rootContainer selector where all your elements to be loaded are present.
//Pass empty string for default body to be picked up.

####Configurational parameters.

atOnce - (default-false) set to true if you want all the images to be loaded at once and not on scroll.
margin - (default-50) Margin used while checking if the element is visible on screen. For e.g if margin is set to 200 the element is assumed to be visible 200px before its actually on the screen.
fadeIn - (default-true) whether to fade in the images or not when they are loaded.

//an example options object
$(".container").imgr({
	margin:0,
	fadeIn:false 
});

####Demos

####Stages of image load You can use the class applied to image element at different stages to control the styling of the images.

When the plugin is called and the image is not loaded yet. Class "imgrr" is applied to the image element.
When the image is loaded (once its visible on screen). Class "imgrr" is removed and "imgrrd" is applied to the element.

####Installing and Building The dependencies and build is managed through grunt and you can use following steps to locally run grunt.

Clone the git project
run - npm install (installs npm dependencies)
run - grunt (runs jshint,cleans and builds the files under dist/).

drdim/imgr

imgr