├── b.gif
├── test
    ├── ajax
    │   ├── lazyload.html
    │   └── images.html
    ├── imgs
    │   ├── 1.jpg
    │   ├── 10.jpg
    │   ├── 11.jpg
    │   ├── 12.jpg
    │   ├── 13.jpg
    │   ├── 14.jpg
    │   ├── 15.jpg
    │   ├── 16.jpg
    │   ├── 17.jpg
    │   ├── 2.jpg
    │   ├── 3.jpg
    │   ├── 4.jpg
    │   ├── 5.jpg
    │   ├── 6.jpg
    │   ├── 7.jpg
    │   ├── 8.jpg
    │   ├── 9.jpg
    │   ├── test-image.jpg
    │   └── google-mail.jpg
    ├── 14.html
    ├── ajax-loaded-images-ondemand.html
    ├── detached-below-the-fold.html
    ├── slow-domready.html
    ├── fast-domready.html
    ├── detached-in-viewport.html
    ├── onload.html
    ├── ajax-loaded-images.html
    ├── getattribute.html
    ├── test.html
    ├── test_minified.html
    └── double-script.html
├── index.js
├── package.json
├── TODO.md
├── lazyload.min.js
├── README.md
├── .jshintrc
└── lazyload.js


/b.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fasterize/lazyload/HEAD/b.gif


--------------------------------------------------------------------------------
/test/ajax/lazyload.html:
--------------------------------------------------------------------------------
1 | <script src="../../lazyload.js"></script>
2 | 


--------------------------------------------------------------------------------
/test/imgs/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fasterize/lazyload/HEAD/test/imgs/1.jpg


--------------------------------------------------------------------------------
/test/imgs/10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fasterize/lazyload/HEAD/test/imgs/10.jpg


--------------------------------------------------------------------------------
/test/imgs/11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fasterize/lazyload/HEAD/test/imgs/11.jpg


--------------------------------------------------------------------------------
/test/imgs/12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fasterize/lazyload/HEAD/test/imgs/12.jpg


--------------------------------------------------------------------------------
/test/imgs/13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fasterize/lazyload/HEAD/test/imgs/13.jpg


--------------------------------------------------------------------------------
/test/imgs/14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fasterize/lazyload/HEAD/test/imgs/14.jpg


--------------------------------------------------------------------------------
/test/imgs/15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fasterize/lazyload/HEAD/test/imgs/15.jpg


--------------------------------------------------------------------------------
/test/imgs/16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fasterize/lazyload/HEAD/test/imgs/16.jpg


--------------------------------------------------------------------------------
/test/imgs/17.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fasterize/lazyload/HEAD/test/imgs/17.jpg


--------------------------------------------------------------------------------
/test/imgs/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fasterize/lazyload/HEAD/test/imgs/2.jpg


--------------------------------------------------------------------------------
/test/imgs/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fasterize/lazyload/HEAD/test/imgs/3.jpg


--------------------------------------------------------------------------------
/test/imgs/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fasterize/lazyload/HEAD/test/imgs/4.jpg


--------------------------------------------------------------------------------
/test/imgs/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fasterize/lazyload/HEAD/test/imgs/5.jpg


--------------------------------------------------------------------------------
/test/imgs/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fasterize/lazyload/HEAD/test/imgs/6.jpg


--------------------------------------------------------------------------------
/test/imgs/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fasterize/lazyload/HEAD/test/imgs/7.jpg


--------------------------------------------------------------------------------
/test/imgs/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fasterize/lazyload/HEAD/test/imgs/8.jpg


--------------------------------------------------------------------------------
/test/imgs/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fasterize/lazyload/HEAD/test/imgs/9.jpg


--------------------------------------------------------------------------------
/test/imgs/test-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fasterize/lazyload/HEAD/test/imgs/test-image.jpg


--------------------------------------------------------------------------------
/test/imgs/google-mail.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fasterize/lazyload/HEAD/test/imgs/google-mail.jpg


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports.lazyload = require('fs').readFileSync(__dirname + '/lazyload.min.js', 'utf8');
2 | module.exports.lazyloadDebug = require('fs').readFileSync(__dirname + '/lazyload.js', 'utf8');
3 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "lazyload",
 3 |   "description": "Image lazy loading",
 4 |   "version": "0.8.5",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "http://github.com/fasterize/lazyload.git"
 8 |   },
 9 |   "private": true
10 | }
11 | 


--------------------------------------------------------------------------------
/test/14.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <title>Test</title>
 5 |   <script src="../lazyload.min.js"></script>
 6 |   <style>html,body{background:#00f}</style>
 7 | </head>
 8 | <body>
 9 |   <img width=200 height=200 data-frz-src="imgs/test-image.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />a
10 |   <div style="margin-top:300px"></div>
11 |   <img data-frz-src="imgs/google-mail.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />b
12 |   <div style="margin-top:300px"></div>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/TODO.md:
--------------------------------------------------------------------------------
 1 | - We should handle the case where an hidden lazy image trigger onload after we unsubscribed
 2 |   Right now we do not restart listeners so that image will never be shown
 3 | - We could use this handy function for h/v offset checking
 4 | ```js
 5 | function elementInViewport(el) {
 6 |   var rect = el.getBoundingClientRect()
 7 |   return (
 8 |     rect.top + rect.height >= 0 &&
 9 |     rect.left + rect.width >= 0 &&
10 |     rect.bottom - rect.height <= window.innerHeight &&
11 |     rect.right - rect.width <= window.innerWidth
12 |     )
13 | }
14 | ```
15 | - Add automated tests using casperjs
16 | - Check for resize event
17 | - Add IE6/IE7 support ? + Test
18 | - Add "used by" section in README
19 | - Provide fallback for users w/o JS ?
20 | 


--------------------------------------------------------------------------------
/test/ajax-loaded-images-ondemand.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <title>ajax ondemand loaded images</title>
 5 |   <script src="../lazyload.js"></script>
 6 |   <script src="./jquery-1.7.2.js"></script>
 7 |   <style>html,body{background:#00f}</style>
 8 | </head>
 9 | <body>
10 | 
11 | <h1>This test checks that after-onload ajax inserted images can still be lazyloaded</h1>
12 | 
13 | <img data-frz-src="imgs/3.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />c
14 | 
15 | <button id="clickme">click here to load more</button>
16 |   <script>
17 |     $('button').click(function() {
18 |       $('#ajax').load('./ajax/images.html');
19 |     });
20 |   </script>
21 | <div id="ajax"></div>
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/test/detached-below-the-fold.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title>detached element test</title>
 4 |     <script src="../lazyload.js"></script>
 5 |     <script src="./jquery-1.7.2.js"></script>
 6 |   </head>
 7 |   <body>
 8 | 
 9 |     <h1>When</h1>
10 |     <p>An image is below the fold</p>
11 |     <p>And it gets registered into the lazyloader</p>
12 |     <p>But is not shown because it is far from the fold</p>
13 |     <p>And it gets removed by some JavaScript</p>
14 |     <p>When we scroll to the bottom, we do not fail in I.E (no error)</p>
15 | 
16 |     <div style="margin-top:3000px; width:100px; height:200px"></p>
17 |     <div style="margin-top:300px; width:100px; height:200px; background:blue"></div>
18 |     <img id="removeme" data-frz-src="imgs/11.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />k
19 | 
20 |     <script>
21 |       $(function() {
22 |         $('#removeme').detach();
23 |       });
24 |     </script>
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/test/slow-domready.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <title>slow domready</title>
 5 |   <script src="../lazyload.js"></script>
 6 |   <script src="./jquery-1.7.2.js"></script>
 7 |   <script>$(function() {
 8 |     $('h1').text('Document Ready!');
 9 |   });
10 |   </script>
11 |   <style>html,body{margin:0;padding:0;background:#00f}</style>
12 | </head>
13 | <body>
14 | <h1>Document Not Ready ...</h1>
15 | <h2>Image should be shown before domready</h2>
16 | 
17 | <img style="border:10px solid #000;display:block" width=200 height=200 data-frz-src="imgs/2.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />a
18 | 
19 | <p>This test check that even if domready event is very slow, we still manage to show a lazyloaded image before the script.</p>
20 | 
21 | <script>
22 | document.write('<scr' + 'ipt type="text/javascript" src="http://1.cuzillion.com/bin/resource.cgi?type=js&sleep=1&jsdelay=1&n=1&t=1340197119"></scr' + 'ipt>');
23 | </script>
24 | 
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/test/fast-domready.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <title>fast domready</title>
 5 |   <!-- It is very important that our lazyload registers before any other script to be the first notified about domready -->
 6 |   <script src="../lazyload.js"></script>
 7 |   <script src="./jquery-1.7.2.js"></script>
 8 |   <script>$(function() {
 9 |     $('h1').text('Document Ready!');
10 | 
11 |     $('i').text($('img').attr('src'));
12 |   });
13 |   </script>
14 |   <style>html,body{margin:0;padding:0;background:#00f}</style>
15 | </head>
16 | <body>
17 | <h1>Document Not Ready ...</h1>
18 | <h2>Found src should be <b>imgs/2.jpg</b></h2>
19 | 
20 | <p>Found src: <i></i></p>
21 | 
22 | <img style="border:10px solid #000;display:block" width=200 height=200 data-frz-src="imgs/2.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />a
23 | 
24 | <p>This test check that when the domready event is really fast, we still manage to show the image and switch data-frz-src/src attributes.</p>
25 | 
26 | <p>This will still not work for scripts trying to get the src of lazyloaded images below the fold as their src will still be a blank data-uri image.</p>
27 | 
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/test/detached-in-viewport.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <title>detached images dom nodes</title>
 5 |   <script src="../lazyload.js"></script>
 6 |   <script src="./jquery-1.7.2.js"></script>
 7 |   <script>
 8 |     $(function() {
 9 |       // the action of $('<img') will trigger the onload event
10 |       // then it will not be triggered again when inserted into dom
11 |       // the only way I can think of to tackle this is have a setInterval
12 |       // polling for not-yet-loaded images
13 |       // but that's expensive
14 |       // if you resize and scroll down, it will be shown
15 |       var $img = $('<img data-frz-src="imgs/2.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />');
16 |       $(window).load(function() {
17 |         setTimeout(function(){
18 |           $('#ajax').append($img);
19 |         }, 1000)
20 |       });
21 |     });
22 |   </script>
23 |   <style>html,body{background:#00f}</style>
24 | </head>
25 | <body>
26 | 
27 | <h1>This test checks that detached dom nodes can be lazyloaded (fails)</h1>
28 | 
29 | <div style="margin-top:300px"></div>
30 | 
31 | <h1>And now ajax images</h1>
32 | <div id="ajax"></div>
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/test/onload.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <title>onload</title>
 5 |   <script src="../lazyload.js"></script>
 6 |   <script src="./jquery-1.7.2.js"></script>
 7 |   <script>$(window).on('load', function (){
 8 |     $('.big2').hide();
 9 |   });
10 |   </script>
11 |   <style>html,body{margin:0;padding:0;background:#00f}</style>
12 | </head>
13 | <body>
14 | <h1>Hide images onload test</h1>
15 | 
16 | <p>This test checks that if we remove an image that trigger some other images to be shown, we will show them</p>
17 | 
18 | <p>Fixed with asking to show image at onload</p>
19 | 
20 | <img width=444 height=450 src=./imgs/17.jpg id=big1 />
21 | <br/><img width=444 height=450 src=./imgs/17.jpg class=big2 />
22 | <br/><img width=444 height=450 src=./imgs/17.jpg class=big2 />
23 | <br/><img width=444 height=450 src=./imgs/17.jpg class=big2 />
24 | <br/><img width=444 height=450 src=./imgs/17.jpg class=big2 />
25 | <blink>BAMMMMMMMMMMM! not shown</blink>
26 | <img style="border:10px solid #000;display:block" width=200 height=200 data-frz-src="imgs/2.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />a
27 | 
28 | <script type='text/javascript' src='http://1.cuzillion.com/bin/resource.cgi?type=js&sleep=1&n=1&t=1328809296'></script>
29 | </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/test/ajax-loaded-images.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <title>ajax loaded images</title>
 5 |   <script src="../lazyload.js"></script>
 6 |   <script src="./jquery-1.7.2.js"></script>
 7 |   <script>
 8 |     $(function() {
 9 |       $('#ajax').load('./ajax/images.html');
10 |     });
11 |   </script>
12 |   <style>html,body{background:#00f}</style>
13 | </head>
14 | <body>
15 | 
16 | <h1>This test checks that ajax inserted images can be lazyloaded</h1>
17 | 
18 | <div style="margin-top:300px"></div>
19 | <img data-frz-src="imgs/2.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />b
20 | <div style="margin-top:300px"></div>
21 | <img data-frz-src="imgs/3.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />c
22 | <div style="margin-top:300px"></div>
23 | <img data-frz-src="imgs/4.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />d
24 | <div style="margin-top:300px"></div>
25 | <img data-frz-src="imgs/5.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />e
26 | <div style="margin-top:300px"></div>
27 | <img data-frz-src="imgs/6.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />f
28 | 
29 | <h1>And now ajax images</h1>
30 | <div id="ajax"></div>
31 | </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/lazyload.min.js:
--------------------------------------------------------------------------------
1 | window.lzld||function(e,d){function m(){n=!0;f();setTimeout(f,25)}function p(a){var b=0;return function(){var c=+new Date;20>c-b||(b=c,a.apply(this,arguments))}}function h(a,b,c){a.attachEvent?a.attachEvent&&a.attachEvent("on"+b,c):a.addEventListener(b,c,!1)}function k(a,b,c){a.detachEvent?a.detachEvent&&a.detachEvent("on"+b,c):a.removeEventListener(b,c,!1)}function q(a,b){return y(d.documentElement,a)&&a.getBoundingClientRect().top<r+200?(a.onload=null,a.removeAttribute("onload"),a.src=a.getAttribute("data-frz-src"),a.removeAttribute("data-frz-src"),g[b]=null,!0):!1}function s(){return 0<d.documentElement.clientHeight?d.documentElement.clientHeight:d.body&&0<d.body.clientHeight?d.body.clientHeight:0<e.innerHeight?e.innerHeight:200}function t(){var a=g.length,b,c=!0;for(b=0;b<a;b++){var d=g[b];null===d||q(d,b)||(c=!1)}c&&n&&(l=!0,k(e,"resize",u),k(e,"scroll",f),k(e,"touchmove",f),k(e,"load",m))}function v(){l=!1;h(e,"resize",u);h(e,"scroll",f); h(e,"touchmove",f)}function z(){var a=HTMLImageElement.prototype.getAttribute;HTMLImageElement.prototype.getAttribute=function(b){return"src"===b?a.call(this,"data-frz-src")||a.call(this,b):a.call(this,b)}}function w(a,b){var c,d;if(b){if(Array.prototype.indexOf)return Array.prototype.indexOf.call(b,a,c);d=b.length;for(c=c?0>c?Math.max(0,d+c):c:0;c<d;c++)if(c in b&&b[c]===a)return c}return-1}var r=s(),g=[],n=!1,l=!1,u=p(function(){r=s()}),f=p(t);e.HTMLImageElement&& z();e.lzld=function(a){-1===w(a,g)&&(l&&v(),q(a,g.push(a)-1))};(function(a){function b(c){if("readystatechange"!==c.type||"complete"===d.readyState)k("load"===c.type?e:d,c.type,b),f||(f=!0,a())}function c(){try{d.documentElement.doScroll("left")}catch(a){setTimeout(c,50);return}b("poll")}var f=!1,g=!0;if("complete"===d.readyState)a();else{if(d.createEventObject&&d.documentElement.doScroll){try{g=!e.frameElement}catch(l){}g&&c()}h(d,"DOMContentLoaded",b);h(d,"readystatechange",b);h(e,"load",b)}})(function(){for(var a= d.getElementsByTagName("img"),b,c=0,e=a.length;c<e;c+=1)b=a[c],b.getAttribute("data-frz-src")&&-1===w(b,g)&&g.push(b);t();setTimeout(f,25)});h(e,"load",m);v();var y=d.documentElement.compareDocumentPosition?function(a,b){return!!(a.compareDocumentPosition(b)&16)}:d.documentElement.contains?function(a,b){return a!==b&&(a.contains?a.contains(b):!1)}:function(a,b){for(;b=b.parentNode;)if(b===a)return!0;return!1}}(this,document);
2 | 


--------------------------------------------------------------------------------
/test/getattribute.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <title>getAttribute test</title>
 5 |   <script src="../lazyload.js"></script>
 6 |   <script src="./jquery-1.7.2.js"></script>
 7 |   <style>html,body{margin:0;padding:0;background:#00f}</style>
 8 | </head>
 9 | <body>
10 | <script>
11 |   var srcs = [];
12 | 
13 |   function done() {
14 |     var res = 'success';
15 |     for (var i = 0, max = srcs.length; i < max; i++) {
16 |       if (srcs[i].indexOf('imgs/1.jpg') === -1) {
17 |         res = 'error ('+srcs[i]+')';
18 |         break;
19 |       }
20 |     }
21 | 
22 |     $('#result').text(res);
23 |   }
24 | 
25 |   // domready
26 |   $(function() {
27 |     srcs.push(document.getElementsByTagName('img')[0].getAttribute('src'));
28 |     srcs.push(document.getElementById('img1').getAttribute('src'))
29 |     srcs.push($('#img2').attr('src'));
30 |   });
31 | 
32 |   // onload
33 |   $(window).load(function() {
34 |     // fails in ie < 8
35 |     srcs.push($('#img4').attr('src'));
36 |     done();
37 |   });
38 | 
39 | </script>
40 | 
41 | <p>We checks that in any situation when a script requests an img src, we give real src, not
42 |   the fake blank image.</p>
43 | 
44 | <p>A lot of slideshows are trying to get src attributes. Attention, we cannot handle img['src']</p>
45 | 
46 | <p style="background: #fff">It passes if it says `success`: <span id="result"></span></p>
47 | 
48 | <img id="img1" style="border:10px solid #000;display:block" width=200 height=200 data-frz-src="imgs/1.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />
49 | 
50 | <img id="img2" style="border:10px solid #000;display:block" width=200 height=200 data-frz-src="imgs/1.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />
51 | 
52 | <div style="height:900px"></div>
53 | 
54 | <img id="img3" style="border:10px solid #000;display:block" width=200 height=200 data-frz-src="imgs/1.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />
55 | 
56 | <img id="img4" style="border:10px solid #000;display:block" width=200 height=200 data-frz-src="imgs/1.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />
57 | 
58 | <script>
59 |   // before dom ready
60 |   // fails in ie < 8
61 |   srcs.push(document.getElementById('img3').getAttribute('src'));
62 | </script>
63 | 
64 | </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/test/ajax/images.html:
--------------------------------------------------------------------------------
 1 | <img width=200 height=200 data-frz-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) onerror=lzld(this) />a
 2 | <div style="margin-top:300px"></div>
 3 | <img data-frz-src="imgs/2.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />b
 4 | <div style="margin-top:300px"></div>
 5 | <img data-frz-src="imgs/3.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />c
 6 | <div style="margin-top:300px"></div>
 7 | <img data-frz-src="imgs/4.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />d
 8 | <div style="margin-top:300px"></div>
 9 | <img data-frz-src="imgs/5.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />e
10 | <div style="margin-top:300px"></div>
11 | <img data-frz-src="imgs/6.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />f
12 | <div style="margin-top:300px"></div>
13 | <img data-frz-src="imgs/7.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />g
14 | <div style="margin-top:300px"></div>
15 | <img data-frz-src="imgs/8.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />h
16 | <div style="margin-top:300px"></div>
17 | <img data-frz-src="imgs/9.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />i
18 | <div style="margin-top:300px"></div>
19 | <img data-frz-src="imgs/10.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />j
20 | <div style="margin-top:300px"></div>
21 | <img data-frz-src="imgs/11.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />k
22 | <div style="margin-top:300px"></div>
23 | <img data-frz-src="imgs/12.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />l
24 | <div style="margin-top:300px"></div>
25 | <img data-frz-src="imgs/13.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />m
26 | <div style="margin-top:300px"></div>
27 | <img data-frz-src="imgs/14.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />n
28 | <div style="margin-top:300px"></div>
29 | <img data-frz-src="imgs/15.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />o
30 | <script type='text/javascript' src='http://1.cuzillion.com/bin/resource.cgi?type=js&sleep=5&n=1&t=1328809296'></script>
31 | 


--------------------------------------------------------------------------------
/test/test.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <title>standard test</title>
 5 |   <script src="../lazyload.js"></script>
 6 |   <style>html,body{background:#00f}</style>
 7 | </head>
 8 | <body>
 9 | 
10 | <img width=200 height=200 data-frz-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) onerror=lzld(this) />a
11 | <div style="margin-top:300px"></div>
12 | <img data-frz-src="imgs/2.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />b
13 | <div style="margin-top:300px"></div>
14 | <img data-frz-src="imgs/3.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />c
15 | <div style="margin-top:300px"></div>
16 | <img data-frz-src="imgs/4.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />d
17 | <div style="margin-top:300px"></div>
18 | <img data-frz-src="imgs/5.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />e
19 | <div style="margin-top:300px"></div>
20 | <img data-frz-src="imgs/6.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />f
21 | <div style="margin-top:300px"></div>
22 | <img data-frz-src="imgs/7.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />g
23 | <div style="margin-top:300px"></div>
24 | <img data-frz-src="imgs/8.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />h
25 | <div style="margin-top:300px"></div>
26 | <img data-frz-src="imgs/9.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />i
27 | <div style="margin-top:300px"></div>
28 | <img data-frz-src="imgs/10.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />j
29 | <div style="margin-top:300px"></div>
30 | <img data-frz-src="imgs/11.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />k
31 | <div style="margin-top:300px"></div>
32 | <img data-frz-src="imgs/12.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />l
33 | <div style="margin-top:300px"></div>
34 | <img data-frz-src="imgs/13.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />m
35 | <div style="margin-top:300px"></div>
36 | <img data-frz-src="imgs/14.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />n
37 | <div style="margin-top:300px"></div>
38 | <img data-frz-src="imgs/15.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />o
39 | <script type='text/javascript' src='http://1.cuzillion.com/bin/resource.cgi?type=js&sleep=5&n=1&t=1328809296'></script>
40 | </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/test/test_minified.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <title>minified test</title>
 5 |   <script src="../lazyload.min.js"></script>
 6 |   <style>html,body{background:#00f}</style>
 7 | </head>
 8 | <body>
 9 | <img width=200 height=200 data-frz-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) onerror=lzld(this) />a
10 | <div style="margin-top:300px"></div>
11 | <img data-frz-src="imgs/2.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />b
12 | <div style="margin-top:300px"></div>
13 | <img data-frz-src="imgs/3.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />c
14 | <div style="margin-top:300px"></div>
15 | <img data-frz-src="imgs/4.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />d
16 | <div style="margin-top:300px"></div>
17 | <img data-frz-src="imgs/5.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />e
18 | <div style="margin-top:300px"></div>
19 | <img data-frz-src="imgs/6.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />f
20 | <div style="margin-top:300px"></div>
21 | <img data-frz-src="imgs/7.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />g
22 | <div style="margin-top:300px"></div>
23 | <img data-frz-src="imgs/8.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />h
24 | <div style="margin-top:300px"></div>
25 | <img data-frz-src="imgs/9.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />i
26 | <div style="margin-top:300px"></div>
27 | <img data-frz-src="imgs/10.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />j
28 | <div style="margin-top:300px"></div>
29 | <img data-frz-src="imgs/11.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />k
30 | <div style="margin-top:300px"></div>
31 | <img data-frz-src="imgs/12.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />l
32 | <div style="margin-top:300px"></div>
33 | <img data-frz-src="imgs/13.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />m
34 | <div style="margin-top:300px"></div>
35 | <img data-frz-src="imgs/14.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />n
36 | <div style="margin-top:300px"></div>
37 | <img data-frz-src="imgs/15.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />o
38 | <script type='text/javascript' src='http://1.cuzillion.com/bin/resource.cgi?type=js&sleep=5&n=1&t=1328809296'></script>
39 | </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/test/double-script.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <title>double script insertion</title>
 5 |   <script src="../lazyload.js"></script>
 6 |   <script src="./jquery-1.7.2.js"></script>
 7 |   <script>
 8 |     $(function() {
 9 |       $('#ajax').load('./ajax/lazyload.html');
10 |     });
11 |   </script>
12 |   <style>html,body{background:#00f}</style>
13 | </head>
14 | <body>
15 | 
16 | <h1>This test checks that when lazyload scripts is inserted more than once</h1>
17 | <h2>We do not fail</h2>
18 | <p>Like calling an ajax html page that has the script in it</p>
19 | 
20 | <img width=200 height=200 data-frz-src="http://1.cuzillion.com/bin/resource.cgi?type=gif&sleep=1&t=1332777237" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />a
21 | <div style="margin-top:300px"></div>
22 | <img data-frz-src="imgs/2.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />b
23 | <div style="margin-top:300px"></div>
24 | <img data-frz-src="imgs/3.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />c
25 | <div style="margin-top:300px"></div>
26 | <img data-frz-src="imgs/4.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />d
27 | <div style="margin-top:300px"></div>
28 | <img data-frz-src="imgs/5.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />e
29 | <div style="margin-top:300px"></div>
30 | <img data-frz-src="imgs/6.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />f
31 | <div style="margin-top:300px"></div>
32 | <img data-frz-src="imgs/7.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />g
33 | <div style="margin-top:300px"></div>
34 | <img data-frz-src="imgs/8.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />h
35 | <div style="margin-top:300px"></div>
36 | <img data-frz-src="imgs/9.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />i
37 | <div style="margin-top:300px"></div>
38 | <img data-frz-src="imgs/10.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />j
39 | <div style="margin-top:300px"></div>
40 | <img data-frz-src="imgs/11.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />k
41 | <div style="margin-top:300px"></div>
42 | <img data-frz-src="imgs/12.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />l
43 | <div style="margin-top:300px"></div>
44 | <img data-frz-src="imgs/13.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />m
45 | <div style="margin-top:300px"></div>
46 | <img data-frz-src="imgs/14.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />n
47 | <div style="margin-top:300px"></div>
48 | <img data-frz-src="imgs/15.jpg" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== onload=lzld(this) onerror=lzld(this) />o
49 | <div id="ajax"></div>
50 | </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # lazyload
  2 | 
  3 | This image lazyloader is designed to help you save http requests on images.
  4 | 
  5 | Most of the time, when you have 100 images on a page, your user doesn't need them all.
  6 | 
  7 | This lazyloader will only load what is necessary.
  8 | 
  9 | It's a standalone script that weights ~1KB minified gzipped.
 10 | 
 11 | ## Using it in your project, website or any application
 12 | 
 13 | You should use the `lazyload.min.js` file from this repo. It has a line with [licence](#Licence) information in it that is mandatory.
 14 | 
 15 | It helps us to be rewarded for our work and you to always have a link to this project.
 16 | 
 17 | ## How to use
 18 | 
 19 | 1. Add lazyload.min.js to your page before any `<script>` tag, either src or inline if
 20 | you do not have any other scripts in the `<head>`.
 21 | 2. Change all `<img>` tags to lazyload :
 22 | 
 23 | ```html
 24 |   <img
 25 |     data-frz-src="real/image/src.jpg"
 26 |     src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
 27 |     onload=lzld(this) onerror=lzld(this) />
 28 | ```
 29 | 3. Enjoy
 30 | 
 31 | ## Production ready? Yes.
 32 | 
 33 | Is it safe to use this piece of software? Don't trust us, trust them:
 34 | 
 35 | * [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.
 36 | * [rue89.com](http://www.rue89.com/), news, 40 millions page views per month. [source](http://www.ojd-internet.com/chiffres-internet/7851-rue89.com)
 37 | * [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)
 38 | 
 39 | They all use lazyload for production websites and are happy with it. Customers told us that
 40 | they *cut page download size by 2*!
 41 | 
 42 | ## Why another lazyload plugin
 43 | 
 44 | We could not find any standalone lazyloader but [the one on stackoverflow](http://stackoverflow.com/questions/3228521/stand-alone-lazy-loading-images-no-framework-based).
 45 | 
 46 | We first used that one, then we re-wrote it entirely with ideas from [mod_pagespeed lazyloader](http://www.modpagespeed.com/lazyload_images.html?ModPagespeed=on&ModPagespeedFilters=lazyload_images).
 47 | 
 48 | We're now upgrading our lazyload from time to time to make it more robust.
 49 | 
 50 | ## Browser support
 51 | 
 52 | *IE6+ or modern browser.*
 53 | 
 54 | IE6/7 originally does not support data uri:s images but using the onerror event on to-be-lazyloaded images, we're able to register the current image in the lazyloader.
 55 | The only drawback is that you can have red crosses showing that original data uri:s image cannot be loaded. But well, it's old IE so no big deal.
 56 | 
 57 | You can have IE6/7 support without the hack, use the `b.gif` image instead of the data uri:s and remove `onerror`.
 58 | 
 59 | ## How does it work
 60 | 
 61 | We built our lazyloader with efficiency and speed in mind.
 62 | 
 63 | Many cases are handled, see test/.
 64 | 
 65 | We watch the domready event.
 66 | 
 67 | But if it takes too much time to fire, we use the `<img onload=lzld(this)` fallback that will fire before the domready event.
 68 | 
 69 | Scroll and resize events are throttled so that we do not run too often.
 70 | 
 71 | Adding to the `<head>` is mandatory otherwise we could not show images as fast as we want.
 72 | And we would not be the first script to register to the domready event.
 73 | 
 74 | The base 64 src should be the smallest possible it is from http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever
 75 | 
 76 | Do not worry about the size overhead of adding a lot of base 64 src images to your page :
 77 |  GZIP is here to help (http://www.gzip.org/deflate.html).
 78 | 
 79 | ## Contact
 80 | 
 81 | If you want to automatically add lazyload to your website, contact us at http://fasterize.com
 82 | 
 83 | ## CMS integration
 84 | 
 85 | * [Drupal](http://drupal.org/project/lazyload), thanks to https://twitter.com/#!/cirotix
 86 | * your favorite CMS: do it!
 87 | 
 88 | ## Licence
 89 | 
 90 | (The MIT Licence)
 91 | 
 92 | Copyright (c) 2012 Vincent Voyer, http://fasterize.com
 93 | 
 94 | Permission is hereby granted, free of charge, to any person obtaining
 95 | a copy of this software and associated documentation files (the
 96 | "Software"), to deal in the Software without restriction, including
 97 | without limitation the rights to use, copy, modify, merge, publish,
 98 | distribute, sublicense, and/or sell copies of the Software, and to
 99 | permit persons to whom the Software is furnished to do so, subject to
100 | the following conditions:
101 | 
102 | The above copyright notice and this permission notice shall be
103 | included in all copies or substantial portions of the Software.
104 | 
105 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
106 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
107 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
108 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
109 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
110 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
111 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
112 | 


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
  1 | {
  2 |     // --------------------------------------------------------------------
  3 |     // JSHint Configuration, Strict Edition
  4 |     // --------------------------------------------------------------------
  5 |     //
  6 |     // This is a options template for [JSHint][1], using [JSHint example][2]
  7 |     // and [Ory Band's example][3] as basis and setting config values to
  8 |     // be most strict:
  9 |     //
 10 |     // * set all enforcing options to true
 11 |     // * set all relaxing options to false
 12 |     // * set all environment options to false, except the browser value
 13 |     // * set all JSLint legacy options to false
 14 |     //
 15 |     // [1]: http://www.jshint.com/
 16 |     // [2]: https://github.com/jshint/node-jshint/blob/master/example/config.json
 17 |     // [3]: https://github.com/oryband/dotfiles/blob/master/jshintrc
 18 |     //
 19 |     // @author http://michael.haschke.biz/
 20 |     // @license http://unlicense.org/
 21 | 
 22 |     // == Enforcing Options ===============================================
 23 |     //
 24 |     // These options tell JSHint to be more strict towards your code. Use
 25 |     // them if you want to allow only a safe subset of JavaScript, very
 26 |     // useful when your codebase is shared with a big number of developers
 27 |     // with different skill levels.
 28 | 
 29 |     "bitwise"       : true,     // Prohibit bitwise operators (&, |, ^, etc.).
 30 |     "curly"         : false,     // Require {} for every new block or scope.
 31 |     "eqeqeq"        : true,     // Require triple equals i.e. `===`.
 32 |     "forin"         : true,     // Tolerate `for in` loops without `hasOwnPrototype`.
 33 |     "immed"         : true,     // Require immediate invocations to be wrapped in parens e.g. `( function(){}() );`
 34 |     "latedef"       : false,     // Prohibit variable use before definition.
 35 |     "newcap"        : true,     // Require capitalization of all constructor functions e.g. `new F()`.
 36 |     "noarg"         : true,     // Prohibit use of `arguments.caller` and `arguments.callee`.
 37 |     "noempty"       : true,     // Prohibit use of empty blocks.
 38 |     "nonew"         : true,     // Prohibit use of constructors for side-effects.
 39 |     "plusplus"      : false,    // Allow use of `++` & `--`.
 40 |     "regexp"        : true,     // Prohibit `.` and `[^...]` in regular expressions.
 41 |     "undef"         : true,     // Require all non-global variables be declared before they are used.
 42 |     "strict"        : false,    // Do not Require `use strict` pragma in every file.
 43 |     "trailing"      : true,     // Prohibit trailing whitespaces.
 44 | 
 45 |     // == Relaxing Options ================================================
 46 |     //
 47 |     // These options allow you to suppress certain types of warnings. Use
 48 |     // them only if you are absolutely positive that you know what you are
 49 |     // doing.
 50 | 
 51 |     "asi"           : true,     // Tolerate Automatic Semicolon Insertion (no semicolons).
 52 |     "boss"          : false,    // Tolerate assignments inside if, for & while. Usually conditions & loops are for comparison, not assignments.
 53 |     "debug"         : false,    // Allow debugger statements e.g. browser breakpoints.
 54 |     "eqnull"        : false,    // Tolerate use of `== null`.
 55 |     "es5"           : true,     // Allow EcmaScript 5 syntax.
 56 |     "esnext"        : true,     // Allow ES.next specific features such as `const` and `let`.
 57 |     "evil"          : false,    // Tolerate use of `eval`.
 58 |     "expr"          : true,    // Tolerate `ExpressionStatement` as Programs.
 59 |     "funcscope"     : false,    // Tolerate declarations of variables inside of control structures while accessing them later from the outside.
 60 |     "globalstrict"  : false,    // Allow global "use strict" (also enables 'strict').
 61 |     "iterator"      : false,    // Allow usage of __iterator__ property.
 62 |     "lastsemic"     : false,    // Tolerat missing semicolons when the it is omitted for the last statement in a one-line block.
 63 |     "laxbreak"      : true,    // Tolerate unsafe line breaks e.g. `return [\n] x` without semicolons.
 64 |     "laxcomma"      : true,     // Suppress warnings about comma-first coding style.
 65 |     "loopfunc"      : false,    // Allow functions to be defined within loops.
 66 |     "multistr"      : false,    // Tolerate multi-line strings.
 67 |     "onecase"       : false,    // Tolerate switches with just one case.
 68 |     "proto"         : false,    // Tolerate __proto__ property. This property is deprecated.
 69 |     "regexdash"     : false,    // Tolerate unescaped last dash i.e. `[-...]`.
 70 |     "scripturl"     : false,    // Tolerate script-targeted URLs.
 71 |     "smarttabs"     : false,    // Tolerate mixed tabs and spaces when the latter are used for alignmnent only.
 72 |     "shadow"        : false,    // Allows re-define variables later in code e.g. `var x=1; x=2;`.
 73 |     "sub"           : true,    // Tolerate all forms of subscript notation besides dot notation e.g. `dict['key']` instead of `dict.key`.
 74 |     "supernew"      : false,    // Tolerate `new function () { ... };` and `new Object;`.
 75 |     "validthis"     : false,    // Tolerate strict violations when the code is running in strict mode and you use this in a non-constructor function.
 76 | 
 77 |     // == Environments ====================================================
 78 |     //
 79 |     // These options pre-define global variables that are exposed by
 80 |     // popular JavaScript libraries and runtime environments—such as
 81 |     // browser or node.js.
 82 | 
 83 |     "browser"       : true,    // Standard browser globals e.g. `window`, `document`.
 84 |     "couch"         : false,    // Enable globals exposed by CouchDB.
 85 |     "devel"         : false,    // Allow development statements e.g. `console.log();`.
 86 |     "dojo"          : false,    // Enable globals exposed by Dojo Toolkit.
 87 |     "jquery"        : false,    // Enable globals exposed by jQuery JavaScript library.
 88 |     "mootools"      : false,    // Enable globals exposed by MooTools JavaScript framework.
 89 |     "node"          : false,     // Enable globals available when code is running inside of the NodeJS runtime environment.
 90 |     "nonstandard"   : false,    // Define non-standard but widely adopted globals such as escape and unescape.
 91 |     "prototypejs"   : false,    // Enable globals exposed by Prototype JavaScript framework.
 92 |     "rhino"         : false,    // Enable globals available when your code is running inside of the Rhino runtime environment.
 93 |     "wsh"           : false,    // Enable globals available when your code is running as a script for the Windows Script Host.
 94 | 
 95 |     // == JSLint Legacy ===================================================
 96 |     //
 97 |     // These options are legacy from JSLint. Aside from bug fixes they will
 98 |     // not be improved in any way and might be removed at any point.
 99 | 
100 |     "nomen"         : false,    // Prohibit use of initial or trailing underbars in names.
101 |     "onevar"        : false,    // Allow only one `var` statement per function.
102 |     "passfail"      : false,    // Stop on first error.
103 |     "white"         : false,    // Check against strict whitespace and indentation rules.
104 | 
105 |     // == Undocumented Options ============================================
106 |     //
107 |     // While I've found these options in [example1][2] and [example2][3]
108 |     // they are not described in the [JSHint Options documentation][4].
109 |     //
110 |     // [4]: http://www.jshint.com/options/
111 | 
112 |     "maxerr"        : 100,      // Maximum errors before stopping.
113 |     "predef"        : [         // Extra globals.
114 |         //"exampleVar",
115 |         //"anotherCoolGlobal",
116 |         //"iLoveDouglas"
117 |     ],
118 |     "indent"        : 2         // Specify indentation spacing
119 | }
120 | 


--------------------------------------------------------------------------------
/lazyload.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |   lazyload.js: Image lazy loading
  3 | 
  4 |   Copyright (c) 2012 Vincent Voyer, http://fasterize.com
  5 | 
  6 |   Permission is hereby granted, free of charge, to any person obtaining
  7 |   a copy of this software and associated documentation files (the
  8 |   "Software"), to deal in the Software without restriction, including
  9 |   without limitation the rights to use, copy, modify, merge, publish,
 10 |   distribute, sublicense, and/or sell copies of the Software, and to
 11 |   permit persons to whom the Software is furnished to do so, subject to
 12 |   the following conditions:
 13 | 
 14 |   The above copyright notice and this permission notice shall be
 15 |   included in all copies or substantial portions of the Software.
 16 | 
 17 |   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 18 |   EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 19 |   MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 20 |   NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
 21 |   LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 22 |   OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 23 |   WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 24 | 
 25 | */
 26 | 
 27 | // Prevent double lazyload script on same page
 28 | // We NEED to use string as closure compiler would otherwise compile this statement badly
 29 | if (!window['lzld']) {
 30 |   (function(window, document){
 31 |     var
 32 |       // Vertical offset in px. Used for preloading images while scrolling
 33 |       offset = 200,
 34 |       //where to get real src
 35 |       lazyAttr = 'data-frz-src',
 36 |       // Window height
 37 |       winH = viewport(),
 38 |       // Self-populated page images array, we do not getElementsByTagName
 39 |       imgs = [],
 40 |       pageHasLoaded = false,
 41 |       unsubscribed = false,
 42 | 
 43 |       // throttled functions, so that we do not call them too much
 44 |       saveViewportT = throttle(saveViewport, 20),
 45 |       showImagesT = throttle(showImages, 20);
 46 | 
 47 |     // Override image element .getAttribute globally so that we give the real src
 48 |     // does not works for ie < 8: http://perfectionkills.com/whats-wrong-with-extending-the-dom/
 49 |     // Internet Explorer 7 (and below) [...] does not expose global Node, Element, HTMLElement, HTMLParagraphElement
 50 |     window['HTMLImageElement'] && overrideGetattribute();
 51 | 
 52 |     // Called from every lazy <img> onload event
 53 |     window['lzld'] = onDataSrcImgLoad;
 54 | 
 55 |     // init
 56 |     domready(findImages);
 57 |     addEvent(window, 'load', onLoad);
 58 | 
 59 |     // Bind events
 60 |     subscribe();
 61 | 
 62 |     // called by img onload= or onerror= for IE6/7
 63 |     function onDataSrcImgLoad(img) {
 64 |       // if image is not already in the imgs array
 65 |       // it can already be in it if domready was fast and img onload slow
 66 |       if (inArray(img, imgs) === -1) {
 67 |         // this case happens when the page had loaded but we inserted more lazyload images with
 68 |         // javascript (ajax). We need to re-watch scroll/resize
 69 |         if (unsubscribed) {
 70 |           subscribe();
 71 |         }
 72 |         showIfVisible(img, imgs.push(img) - 1);
 73 |       }
 74 |     }
 75 | 
 76 |     // find and merge images on domready with possibly already present onload= onerror= imgs
 77 |     function findImages() {
 78 |       var
 79 |         domreadyImgs = document.getElementsByTagName('img'),
 80 |         currentImg;
 81 | 
 82 |       // merge them with already self onload registered imgs
 83 |       for (var imgIndex = 0, max = domreadyImgs.length; imgIndex < max; imgIndex += 1) {
 84 |         currentImg = domreadyImgs[imgIndex];
 85 |         if (currentImg.getAttribute(lazyAttr) && inArray(currentImg, imgs) === -1) {
 86 |           imgs.push(currentImg);
 87 |         }
 88 |       }
 89 | 
 90 |       showImages();
 91 |       setTimeout(showImagesT, 25);
 92 |     }
 93 | 
 94 |     function onLoad() {
 95 |       pageHasLoaded = true;
 96 |       // if page height changes (hiding elements at start)
 97 |       // we should recheck for new in viewport images that need to be shown
 98 |       // see onload test
 99 |       showImagesT();
100 |       // we could be the first to be notified about onload, so let others event handlers
101 |       // pass and then try again
102 |       // because they could change things on images
103 |       setTimeout(showImagesT, 25);
104 |     }
105 | 
106 |     function throttle(fn, minDelay) {
107 |       var lastCall = 0;
108 |       return function() {
109 |         var now = +new Date();
110 |         if (now - lastCall < minDelay) {
111 |           return;
112 |         }
113 |         lastCall = now;
114 |         // we do not return anything as
115 |         // https://github.com/documentcloud/underscore/issues/387
116 |         fn.apply(this, arguments);
117 |       }
118 |     }
119 | 
120 |     // X-browser
121 |     function addEvent( el, type, fn ) {
122 |       if (el.attachEvent) {
123 |         el.attachEvent && el.attachEvent( 'on' + type, fn );
124 |       } else {
125 |         el.addEventListener( type, fn, false );
126 |       }
127 |     }
128 | 
129 |     // X-browser
130 |     function removeEvent( el, type, fn ) {
131 |       if (el.detachEvent) {
132 |         el.detachEvent && el.detachEvent( 'on' + type, fn );
133 |       } else {
134 |         el.removeEventListener( type, fn, false );
135 |       }
136 |     }
137 | 
138 |     // custom domready function
139 |     // ripped from https://github.com/dperini/ContentLoaded/blob/master/src/contentloaded.js
140 |     // http://javascript.nwbox.com/ContentLoaded/
141 |     // http://javascript.nwbox.com/ContentLoaded/MIT-LICENSE
142 |     // kept the inner logic, merged with our helpers/variables
143 |     function domready(callback) {
144 |       var
145 |         done = false,
146 |         top = true;
147 | 
148 |       function init(e) {
149 |         if (e.type === 'readystatechange' && document.readyState !== 'complete') return;
150 |         removeEvent((e.type === 'load' ? window : document), e.type, init);
151 |         if (!done) {
152 |           done = true;
153 |           callback();
154 |         }
155 |       }
156 | 
157 |       function poll() {
158 |         try { document.documentElement.doScroll('left'); } catch(e) { setTimeout(poll, 50); return; }
159 |         init('poll');
160 |       }
161 | 
162 |       if (document.readyState === 'complete') callback();
163 |       else {
164 |         if (document.createEventObject && document.documentElement.doScroll) {
165 |           try { top = !window.frameElement; } catch(e) { }
166 |           if (top) poll();
167 |         }
168 |         addEvent(document, 'DOMContentLoaded', init);
169 |         addEvent(document, 'readystatechange', init);
170 |         addEvent(window, 'load', init);
171 |       }
172 | 
173 |     }
174 | 
175 |     // img = dom element
176 |     // index = imgs array index
177 |     function showIfVisible(img, index) {
178 |       // Note that iOS devices freeze DOM manipulation during scroll, queuing them to apply when the scroll finishes.
179 |       // So it's better to disable the lazyloading on iOS device.
180 |       // We have to check that the current node is in the DOM
181 |       // It could be a detached() dom node
182 |       // http://bugs.jquery.com/ticket/4996
183 |       if (contains(document.documentElement, img)
184 |         && img.getBoundingClientRect().top < winH + offset) {
185 |         // To avoid onload loop calls
186 |         // removeAttribute on IE is not enough to prevent the event to fire
187 |         img.onload = null;
188 |         img.removeAttribute('onload');
189 | 
190 |         img.src = img.getAttribute(lazyAttr);
191 |         img.removeAttribute(lazyAttr);
192 |         imgs[index] = null;
193 | 
194 |         return true; // img shown
195 |       } else {
196 |         return false; // img to be shown
197 |       }
198 |     }
199 | 
200 |     // cross browser viewport calculation
201 |     function viewport() {
202 |       if (document.documentElement.clientHeight > 0) {
203 |         return document.documentElement.clientHeight;
204 |       } else if (document.body && document.body.clientHeight > 0) {
205 |         return document.body.clientHeight
206 |       } else if (window.innerHeight > 0) {
207 |         return window.innerHeight;
208 |       } else {
209 |         return 200;
210 |       }
211 |     }
212 | 
213 |     function saveViewport() {
214 |       winH = viewport();
215 |     }
216 | 
217 |     // Loop through images array to find to-be-shown images
218 |     function showImages() {
219 |       var
220 |         last = imgs.length,
221 |         current,
222 |         allImagesDone = true;
223 | 
224 |       for (current = 0; current < last; current++) {
225 |         var img = imgs[current];
226 |         // if showIfVisible is false, it means we have some waiting images to be
227 |         // shown
228 |         if(img !== null && !showIfVisible(img, current)) {
229 |           allImagesDone = false;
230 |         }
231 |       }
232 | 
233 |       if (allImagesDone && pageHasLoaded) {
234 |         unsubscribe();
235 |       }
236 |     }
237 | 
238 |     function unsubscribe() {
239 |       unsubscribed = true;
240 |       removeEvent(window, 'resize', saveViewportT);
241 |       removeEvent(window, 'scroll', showImagesT);
242 |       removeEvent(window, 'touchmove', showImagesT);
243 |       removeEvent(window, 'load', onLoad);
244 |     }
245 | 
246 |     function subscribe() {
247 |       unsubscribed = false;
248 |       addEvent(window, 'resize', saveViewportT);
249 |       addEvent(window, 'scroll', showImagesT);
250 |       addEvent(window, 'touchmove', showImagesT);
251 |     }
252 | 
253 |     function overrideGetattribute() {
254 |       var original = HTMLImageElement.prototype.getAttribute;
255 |       HTMLImageElement.prototype.getAttribute = function(name) {
256 |         if(name === 'src') {
257 |           var realSrc = original.call(this, lazyAttr);
258 |           return realSrc || original.call(this, name);
259 |         } else {
260 |           // our own lazyloader will go through theses lines
261 |           // because we use getAttribute(lazyAttr)
262 |           return original.call(this, name);
263 |         }
264 |       }
265 |     }
266 | 
267 |     // https://github.com/jquery/sizzle/blob/3136f48b90e3edc84cbaaa6f6f7734ef03775a07/sizzle.js#L708
268 |     var contains = document.documentElement.compareDocumentPosition ?
269 |       function( a, b ) {
270 |         return !!(a.compareDocumentPosition( b ) & 16);
271 |       } :
272 |       document.documentElement.contains ?
273 |       function( a, b ) {
274 |         return a !== b && ( a.contains ? a.contains( b ) : false );
275 |       } :
276 |       function( a, b ) {
277 |         while ( (b = b.parentNode) ) {
278 |           if ( b === a ) {
279 |             return true;
280 |           }
281 |         }
282 |         return false;
283 |       };
284 | 
285 |     // https://github.com/jquery/jquery/blob/f3515b735e4ee00bb686922b2e1565934da845f8/src/core.js#L610
286 |     // We cannot use Array.prototype.indexOf because it's not always available
287 |     function inArray(elem, array, i) {
288 |       var len;
289 | 
290 |       if ( array ) {
291 |         if ( Array.prototype.indexOf ) {
292 |           return Array.prototype.indexOf.call( array, elem, i );
293 |         }
294 | 
295 |         len = array.length;
296 |         i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;
297 | 
298 |         for ( ; i < len; i++ ) {
299 |           // Skip accessing in sparse arrays
300 |           if ( i in array && array[ i ] === elem ) {
301 |             return i;
302 |           }
303 |         }
304 |       }
305 | 
306 |       return -1;
307 |     }
308 | 
309 |   }(this, document))
310 | }
311 | 


--------------------------------------------------------------------------------