Home

Awesome

BttrLazyLoading.js

BttrLazyLoading is a Jquery plugin that allows your web application to defer image loading until images are scrolled to but not only! BttrLazyLoading also allows you to have different version of an image for 4 differents screen sizes: phones (<768px), tablets (≥768px), desktops (≥992px) and large Desktops (≥1200px).

Demo and Documentation

Installation

BttrLazyLoading depends on jQuery (meaning jQuery must be included before the plugin files) and Animate.css (optional) for animations.

<script src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="bttrlazyloading.min.css" />
<link rel="stylesheet" type="text/css" href="animate.min.css" />
<script src="jquery.bttrlazyloading.min.js"></script>

API

Options

Events

Examples

Set options on instanciation

Via data attributes

<img id="yourImageId" class="bttrlazyloading"
	data-bttrlazyloading-xs-src="img/768x200.gif"
	data-bttrlazyloading-sm-src="img/345x250.gif"
	data-bttrlazyloading-md-src="img/455x350.gif"
	data-bttrlazyloading-lg-src="img/360x300.gif"
	data-bttrlazyloading-animation="rotatedIn"
	data-bttrlazyloading-retina="true"
	data-bttrlazyloading-delay="2000"
	data-bttrlazyloading-event="mouseover"
	data-bttrlazyloading-container="document.body"
	data-bttrlazyloading-threshold="500"
/>

For a perfect experience 'width' and 'height' are necessary (The plugin cannot know the dimensions of your images before they load.).

<img id="test" class="bttrlazyloading"
	data-bttrlazyloading-xs-src="img/768x200.gif"
	data-bttrlazyloading-xs-width="768"
	data-bttrlazyloading-xs-height="200"
	data-bttrlazyloading-sm-src="img/345x250.gif"
	data-bttrlazyloading-sm-width="345"
	data-bttrlazyloading-sm-height="250"
	data-bttrlazyloading-md-src="img/455x350.gif"
	data-bttrlazyloading-md-width="455"
	data-bttrlazyloading-md-height="350"
	data-bttrlazyloading-lg-src="img/360x300.gif"
	data-bttrlazyloading-lg-width="360"
	data-bttrlazyloading-lg-height="300"
/>

or

<img id="yourImageId" class="bttrlazyloading"
	data-bttrlazyloading-xs='{"src": "img/720x200.gif", "width" : 720,  "height" : 200}'
	data-bttrlazyloading-sm='{"src": "img/360x200.gif", "width" : 360,  "height" : 200}'
	data-bttrlazyloading-md='{"src": "img/470x200.gif", "width" : 470,  "height" : 200}'
	data-bttrlazyloading-lg='{"src": "img/570x200.gif", "width" : 570,  "height" : 200}'
/>

Only one image size needed! BttrLazyLoading always try to load the biggest version of the image available. Therefore the following example will work on every screen too.

<img id="yourImageId" class="bttrlazyloading"
	data-bttrlazyloading-md-src="img/455x350.gif"
/>

Via the instantiation

$("#yourImageId").bttrlazyloading({
	xs: {
		src: "img/720x200.gif",
		width: 720,
		height: 200
	},
	sm: {
		src: "img/360x200.gif",
		width: 360,
		height: 200
	},
	md: {
		src: "img/470x200.gif",
		width: 470,
		height: 200
	},
	lg: {
		src: "img/570x200.gif",
		width: 570,
		height: 200
	},
	retina: true,
	animation: 'fadeInUp',
	delay: 1000,
	event: 'click',
	container: 'document.body',
	threshold: 666,
	placeholder: 'test'
})

Common problems

HTML5 Doctype

The HTML5 doctype is require to work correctly.

<!DOCTYPE html>

More information

Contribute!

Installation

Prerequisites

Clone the repository

$ git clone https://github.com/shprink/BttrLazyLoading

Install dependencies

$ cd BttrLazyLoading
$ bower install
$ npm install

Build

Compiles and minifies BttrLazyLoading.coffee and bttrlazyloading.css.

gulp

If CoffeeScript isn't globally installed, use node_modules/.bin/cake build

Develop

Builds CoffeeScript and CSS, and runs linting and build steps if any changes occur to important files. This allows you to rerun the tests immidiately after you've changed the CoffeeScript, without having to lint and recompile. Of course, any changes that breaks the CoffeeScript will be prompted on the command line.

gulp watch (coming)

Run tests

Open test/index.html

You are now good to go ;)

Browser Compatibility

IE9+ BttrLazyLoading relies on array.indexOf which was not introduced until IE9. There is a poly fill for this function available here however, it does not help with IE8 support completely.

Contributors