bLazy is a lightweight script for lazy loading and multi-serving images (less than 1.2KB minified and gzipped). It’s written in pure JavaScript why it doesn’t depend on 3rd-party libraries such as jQuery. It lets you lazy load and multi-serve your images so you can save bandwidth and server requests. The user will have faster load times and save data usage if he/she doesn't browse the whole page.
Table of Contents
More examples will come. In the meantime you can play with a basic example at codepen: http://codepen.io/dinbror/pen/HzCAJ
You can install blazy.js with npm:
npm install blazy --save
or bower:
bower install blazy --save
If you don't want to host the script yourself you can link to the latest minified file:
//cdn.jsdelivr.net/blazy/latest/blazy.min.js
on jsDelivr.
Exchange latest
with the specific version number if you want to lock it in.
- bLazy is used on big sites with millions of monthly visitors so it has been tested out in the real world.
- bLazy is written in pure JavaScript why it doesn’t depend on 3rd-party libraries such as jQuery.
- bLazy can lazy load all types of images including background images.
- bLazy can lazy load images depending on screensize (multi-serve images).
- bLazy can serve retina images on retina devices.
- bLazy is lightweight, less than 1.2KB and less than 1.05KB if you don't need IE7- support.
- bLazy is AMD, CommonJS and Browser globals compatible.
- Fixed #60. An "Uncaught TypeError" when options is null introduced in the big refactoring in version 1.4.0.
- Fixed #56. Now it's possible to create multiple versions of blazy without overriding options.
- Added support for CommonJS-like environments that support module.exports like node.
- Fixed #34. Expanded public
load
function with force attribute, so you can force hidden images to be loaded. - Fixed #24, #32 and #35. Updated "elementInView" function with intersection check. Thanks @teohhanhui.
- Fixed #15, when you resize the browser window in another tab bLazy didn't trigger new images in view. Thanks joshribakoff.
- When lazy loading background images it now only updates the background-image css attribute. Thanks Saku.
- Important note: renamed option multi to
breakpoints
because it's much more descriptive. - Added AMD support.
- Minor refactoring.
- Fixed hardcoded retina check (isRetina = true).
- Fixed "Uncaught TypeError" when data-src is null. Instead it'll trigger the
error
callback.
- New feature: After many requests I added the possibility to handle retina images (if you’re not doing retina-first).
- New feature: Now you can also lazy load background images.
- Added new option,
separator
. Used if you want to pass retina images, default separator is ‘|’. (data-src=“image.jpg|image@2x.jpg”).
- Fixed #1, resize/scroll events may be detached when adding elements by ajax.
- Added new option,
errorClass
. Classname an image will get if something goes wrong, default is ‘b-error’. - Renamed option loadedClass to
successClass
so naming is aligned. Default is still ‘b-loaded’.
- Renamed success callback from onLoaded to
success
. - Added onerror callback;
error
. - Added the possibility to pass multiple containers instead of one.
- Fixed "Uncaught TypeError" when container isn't default (window).
- Added null check so we won't try to load an image if it's missing a data source.
- Added new option,
loadedClass
. Classname an image will get when loaded. - Added support for horizontal lazy loading.
- Reduced throttle time for validate.
- Fixed typo in unbindEvent function.
- Added support for IE7 as promised (fallback for querySelectorAll).
- Performance improvements.
- Added throttle function to ensure that we don't call resize/scroll functions too often.
- Cleaning image markup when image has loaded.
##LICENSE:## Copyright (c) 2013-15 Bjørn Klinggaard. Licensed under the The MIT License (MIT).