Permalink
Browse files

update tests, readme, TODO

  • Loading branch information...
1 parent 1727741 commit 276e25927098f6b19f74983129ba73e7d7af4490 vvo committed Mar 23, 2012
Showing with 35 additions and 25 deletions.
  1. +0 −17 README
  2. +31 −7 README.md
  3. +1 −0 TODO.md
  4. +1 −0 test/test.html
  5. +2 −1 test/test_minified.html
View
17 README
@@ -1,17 +0,0 @@
-# Standalone javascript image lazy loader
-
-Use it like this :
-
-```html
-<img
- data-src="real/image/src.jpg"
- src=data:image/gif;base64,R0lGODlhAQABAID/AP///wAAACwAAAAAAQABAAACAkQBADs=
- onload=lzld(this) />
-```
-
-The base 64 src should be the smallest possible, taken from http://www.google-analytics.com/__utm.gif
-
-Do not 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).
-
- http://www.fasterize.com
View
@@ -1,17 +1,41 @@
-# Standalone javascript image lazy loader
+# Standalone, fast & cross browser JavaScript image lazy loader
-Use it like this :
+This image lazy loader is designed to help you save http requests on images.
+Because when you have 100 images on a page, your user doesn't need them all.
+It's like http://davidwalsh.name/lazyload-plugin but standalone and faster to
+show images at page load.
+
+## How to use
+
+1. Add lazyload.min.js to your page in the <head> section, either src or inline if
+you do not have any other scripts in the <head>
+2. Change all <img> tags to this :
```html
-<img
- data-src="real/image/src.jpg"
- src=data:image/gif;base64,R0lGODlhAQABAID/AP///wAAACwAAAAAAQABAAACAkQBADs=
+ <img
+ data-src="real/image/src.jpg"
+ src=data:image/gif;base64,R0lGODlhAQABAID/AP///wAAACwAAAAAAQABAAACAkQBADs=
onload=lzld(this) />
```
+3. Enjoy!
+
+## More
+
+We build our lazyloader with efficiency and speed in mind.
+
+There's 0 call to documents.getElementsByTagName. Each image register itself to the
+lazy loader.
+
+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.
+
+I recommend adding the script in inline in the <head>. It only weights
+< 500 bytes gzipped.
-The base 64 src should be the smallest possible, taken from http://www.google-analytics.com/__utm.gif
+The base 64 src should be the smallest possible it is from http://www.google-analytics.com/__utm.gif
Do not 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).
- http://www.fasterize.com
+If you want to automatically add lazy load to your website, contact us @ http://fasterize.com
View
@@ -13,3 +13,4 @@ function elementInViewport(el) {
}
```
- Add automated tests using casperjs
+- Check for resize event
View
@@ -1,6 +1,7 @@
<!doctype html>
<html>
<head>
+ <title>Test</title>
<script src="../lazyload.js"></script>
</head>
<body>
View
@@ -1,7 +1,8 @@
<!doctype html>
<html>
<head>
- <script src="./lazyload.min.js"></script>
+ <title>Test</title>
+ <script src="../lazyload.min.js"></script>
</head>
<body>
<img data-src="imgs/1.jpg" src=data:image/gif;base64,R0lGODlhAQABAID/AP///wAAACwAAAAAAQABAAACAkQBADs= onload=lzld(this) />a

0 comments on commit 276e259

Please sign in to comment.