Permalink
Browse files

Update README

  • Loading branch information...
1 parent 4dd4fa5 commit a94a6141537a1b8bbfdd77afc3b9d3e4debbbf71 @vvo committed Dec 21, 2012
Showing with 36 additions and 37 deletions.
  1. +36 −37 README.md
View
@@ -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 :
-
```html
- <img
- data-src="real/image/src.jpg"
- src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
- onload=lzld(this) onerror=lzld(this) />
+<!doctype html>
+<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"
+ src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
+ onload=lzld(this) onerror=lzld(this) />
+ </body>
+</html>
```
-3. Enjoy
-
-## Production ready? Yes.
-
-Is it safe to use this piece of software? Don't trust us, trust them:
-* [www.lemonde.fr](http://www.lemonde.fr/) & [mobile.lemonde.fr](http://mobile.lemonde.fr/), news, [top5](http://www.ojd-internet.com/chiffres-internet/) desktop website in France, [1st](http://www.mediametrie.fr/internet/communiques/telecharger.php?f=26408ffa703a72e8ac0117e74ad46f33)(pdf)mobile website in France.
-* [rue89.com](http://www.rue89.com/), news, 40 millions page views per month. [source](http://www.ojd-internet.com/chiffres-internet/7851-rue89.com)
-* [playtv.fr](http://playtv.fr/), tv guide, millions of page views per month. [source](http://www.mediametrie.fr/internet/communiques/telecharger.php?f=26408ffa703a72e8ac0117e74ad46f33) (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](http://www.lemonde.fr), [rue89](http://www.rue89.com), [playtv](http://playtv.fr), [voyages-sncf](http://www.voyages-sncf.com)
## 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 http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever
+The base 64 src should be the smallest possible.
+Reference: http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever
-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 (http://www.gzip.org/deflate.html).
-## Contact
-
-If you want to automatically add lazyload to your website, contact us at http://fasterize.com
-
## CMS integration
* [Drupal](http://drupal.org/project/lazyload), thanks to https://twitter.com/#!/cirotix
* your favorite CMS: do it!
+## Automate
+
+If you want to automatically add lazyload to your website, contact http://fasterize.com
+
## Licence
(The MIT Licence)

0 comments on commit a94a614

Please sign in to comment.