Browse files


  • Loading branch information...
1 parent 4dd4fa5 commit a94a6141537a1b8bbfdd77afc3b9d3e4debbbf71 @vvo committed Dec 21, 2012
Showing with 36 additions and 37 deletions.
  1. +36 −37
@@ -1,43 +1,45 @@
-# lazyload
+# Lazyload
-This image lazyloader is designed to help you save http requests on images.
+An image lazyloader is designed to save requests on page loading (#webperf)
Most of the time, when you have 100 images on a page, your user doesn't need them all.
This lazyloader will only load what is necessary.
-It's a standalone script that weights ~1KB minified gzipped.
-## Using it in your project, website or any application
-You should use the `lazyload.min.js` file from this repo. It has a line with [licence](#Licence) information in it that is mandatory.
-It helps us to be rewarded for our work and you to always have a link to this project.
+It's a standalone script that weights 1398 bytes minified gzipped.
## How to use
-1. Add lazyload.min.js to your page before any `<script>` tag, either src or inline if
-you do not have any other scripts in the `<head>`.
-2. Change all `<img>` tags to lazyload :
- <img
- data-src="real/image/src.jpg"
- onload=lzld(this) onerror=lzld(this) />
+<!doctype html>
+ <head>
+ <title></title>
+ <!-- in your concatenated bundle, inlined, alone and external -->
+ <script src="lazyload.min.js"></script>
+ <script>
+ // For best results, initialize now
+ window.lzld = (new Lazyload).lzld;
+ </script>
+ <!-- your scripts goes here -->
+ </head>
+ <body>
+ <img
+ data-src="real/image/src.jpg"
+ onload=lzld(this) onerror=lzld(this) />
+ </body>
-3. Enjoy
-## Production ready? Yes.
-Is it safe to use this piece of software? Don't trust us, trust them:
-* []( & [](, news, [top5]( desktop website in France, [1st]( website in France.
-* [](, news, 40 millions page views per month. [source](
-* [](, tv guide, millions of page views per month. [source]( (pdf)
+## Features
-They all use lazyload for production websites and are happy with it. Customers told us that
-they *cut page download size by 2*!
+* Cut onload time, page size, number of request by 2x, 3x? Depends on your website
+* Horizontal and vertical (scroll) lazy loading of images
+* Custom container (default to document.body)
+* Many edge cases covered (like slow domready)
+* Has tests/
+* Production ready: YES. Used on major websites like [lemonde](, [rue89](, [playtv](, [voyages-sncf](
## Why another lazyload plugin
@@ -58,10 +60,6 @@ You can have IE6/7 support without the hack, use the `b.gif` image instead of th
## How does it works
-We built our lazyloader with efficiency and speed in mind.
-Many cases are handled, see test/.
We watch the domready event.
But if it takes too much time to fire, we use the `<img onload=lzld(this)` fallback that will fire before the domready event.
@@ -71,20 +69,21 @@ Scroll and resize events are throttled so that we do not run too often.
Adding to the `<head>` is mandatory otherwise we could not show images as fast as we want.
And we would not be the first script to register to the domready event.
-The base 64 src should be the smallest possible it is from
+The base 64 src should be the smallest possible.
-Do not worry about the size overhead of adding a lot of base 64 src images to your page :
+Don't worry about the size overhead of adding a lot of base 64 src images to your page :
GZIP is here to help (
-## Contact
-If you want to automatically add lazyload to your website, contact us at
## CMS integration
* [Drupal](, thanks to!/cirotix
* your favorite CMS: do it!
+## Automate
+If you want to automatically add lazyload to your website, contact
## Licence
(The MIT Licence)

0 comments on commit a94a614

Please sign in to comment.