Skip to content

Commit fff5de8

Browse files
author
vvo
committed
Fixes vvo#11 
1 parent 9e0870f commit fff5de8

File tree

6 files changed

+34
-34
lines changed

6 files changed

+34
-34
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ Change all `<img>` tags to lazyload :
1717
```html
1818
<img
1919
data-src="real/image/src.jpg"
20-
src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
20+
src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==5
2121
onload=lzld(this) />
2222
```
2323

@@ -49,7 +49,7 @@ Scroll and resize events are throttled so that we do not run too often.
4949
Adding to the `<head>` is mandatory otherwise we could not show images as fast as we want.
5050

5151
I recommend adding the script in inline in the `<head>`. It only weights
52-
< 500 bytes gzipped.
52+
~ 550 bytes gzipped.
5353

5454
The base 64 src should be the smallest possible it is from http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever
5555

‎TODO.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,5 @@ function elementInViewport(el) {
1414
```
1515
- Add automated tests using casperjs
1616
- Check for resize event
17-
- Add IE6/IE7 support ?
17+
- Add IE6/IE7 support ? + Test
1818
- Provide fallback for users w/o JS ?

‎b.gif

-6 Bytes
Loading

‎test/onload.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ <h1>BLABLA</h1>
1919
<br/><img width=444 height=450 src=./imgs/17.jpg class=big2 />
2020
<br/><img width=444 height=450 src=./imgs/17.jpg class=big2 />
2121
<blink>BAMMMMMMMMMMM! not shown</blink>
22-
<img style="border:10px solid #000;display:block" width=200 height=200 data-src="imgs/2.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />a
22+
<img style="border:10px solid #000;display:block" width=200 height=200 data-src="imgs/2.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />a
2323

2424
<script type='text/javascript' src='http://1.cuzillion.com/bin/resource.cgi?type=js&sleep=1&n=1&t=1328809296'></script>
2525
</body>

‎test/test.html

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,35 +6,35 @@
66
<style>html,body{background:#00f}</style>
77
</head>
88
<body>
9-
<img width=200 height=200 data-src="http://1.cuzillion.com/bin/resource.cgi?type=gif&sleep=2&n=1&t=1332777237" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />a
9+
<img width=200 height=200 data-src="http://1.cuzillion.com/bin/resource.cgi?type=gif&sleep=2&n=1&t=1332777237" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />a
1010
<div style="margin-top:300px"></div>
11-
<img data-src="imgs/2.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />b
11+
<img data-src="imgs/2.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />b
1212
<div style="margin-top:300px"></div>
13-
<img data-src="imgs/3.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />c
13+
<img data-src="imgs/3.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />c
1414
<div style="margin-top:300px"></div>
15-
<img data-src="imgs/4.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />d
15+
<img data-src="imgs/4.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />d
1616
<div style="margin-top:300px"></div>
17-
<img data-src="imgs/5.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />e
17+
<img data-src="imgs/5.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />e
1818
<div style="margin-top:300px"></div>
19-
<img data-src="imgs/6.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />f
19+
<img data-src="imgs/6.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />f
2020
<div style="margin-top:300px"></div>
21-
<img data-src="imgs/7.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />g
21+
<img data-src="imgs/7.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />g
2222
<div style="margin-top:300px"></div>
23-
<img data-src="imgs/8.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />h
23+
<img data-src="imgs/8.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />h
2424
<div style="margin-top:300px"></div>
25-
<img data-src="imgs/9.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />i
25+
<img data-src="imgs/9.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />i
2626
<div style="margin-top:300px"></div>
27-
<img data-src="imgs/10.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />j
27+
<img data-src="imgs/10.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />j
2828
<div style="margin-top:300px"></div>
29-
<img data-src="imgs/11.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />k
29+
<img data-src="imgs/11.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />k
3030
<div style="margin-top:300px"></div>
31-
<img data-src="imgs/12.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />l
31+
<img data-src="imgs/12.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />l
3232
<div style="margin-top:300px"></div>
33-
<img data-src="imgs/13.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />m
33+
<img data-src="imgs/13.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />m
3434
<div style="margin-top:300px"></div>
35-
<img data-src="imgs/14.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />n
35+
<img data-src="imgs/14.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />n
3636
<div style="margin-top:300px"></div>
37-
<img data-src="imgs/15.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />o
37+
<img data-src="imgs/15.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />o
3838
<script type='text/javascript' src='http://1.cuzillion.com/bin/resource.cgi?type=js&sleep=5&n=1&t=1328809296'></script>
3939
</body>
4040
</html>

‎test/test_minified.html

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,35 +6,35 @@
66
<style>html,body{background:#00f}</style>
77
</head>
88
<body>
9-
<img width=200 height=200 data-src="http://1.cuzillion.com/bin/resource.cgi?type=gif&sleep=2&n=1&t=1332777237" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />a
9+
<img width=200 height=200 data-src="http://1.cuzillion.com/bin/resource.cgi?type=gif&sleep=2&n=1&t=1332777237" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />a
1010
<div style="margin-top:300px"></div>
11-
<img data-src="imgs/2.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />b
11+
<img data-src="imgs/2.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />b
1212
<div style="margin-top:300px"></div>
13-
<img data-src="imgs/3.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />c
13+
<img data-src="imgs/3.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />c
1414
<div style="margin-top:300px"></div>
15-
<img data-src="imgs/4.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />d
15+
<img data-src="imgs/4.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />d
1616
<div style="margin-top:300px"></div>
17-
<img data-src="imgs/5.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />e
17+
<img data-src="imgs/5.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />e
1818
<div style="margin-top:300px"></div>
19-
<img data-src="imgs/6.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />f
19+
<img data-src="imgs/6.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />f
2020
<div style="margin-top:300px"></div>
21-
<img data-src="imgs/7.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />g
21+
<img data-src="imgs/7.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />g
2222
<div style="margin-top:300px"></div>
23-
<img data-src="imgs/8.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />h
23+
<img data-src="imgs/8.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />h
2424
<div style="margin-top:300px"></div>
25-
<img data-src="imgs/9.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />i
25+
<img data-src="imgs/9.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />i
2626
<div style="margin-top:300px"></div>
27-
<img data-src="imgs/10.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />j
27+
<img data-src="imgs/10.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />j
2828
<div style="margin-top:300px"></div>
29-
<img data-src="imgs/11.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />k
29+
<img data-src="imgs/11.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />k
3030
<div style="margin-top:300px"></div>
31-
<img data-src="imgs/12.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />l
31+
<img data-src="imgs/12.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />l
3232
<div style="margin-top:300px"></div>
33-
<img data-src="imgs/13.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />m
33+
<img data-src="imgs/13.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />m
3434
<div style="margin-top:300px"></div>
35-
<img data-src="imgs/14.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />n
35+
<img data-src="imgs/14.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />n
3636
<div style="margin-top:300px"></div>
37-
<img data-src="imgs/15.jpg" src=data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />o
37+
<img data-src="imgs/15.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) />o
3838
<script type='text/javascript' src='http://1.cuzillion.com/bin/resource.cgi?type=js&sleep=5&n=1&t=1328809296'></script>
3939
</body>
4040
</html>

0 commit comments

Comments
 (0)