/
demo.html
76 lines (62 loc) · 17 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!doctype html>
<html>
<head>
<title>lazyLoad demo</title>
</head>
<body>
<p><a href="#d" class="clearcache">Clear the cache</a></p>
<p>Did onload fire (unit test of sorts): <span class="onload"></span></p>
<noscript class="lazy" data-mobile="images/100.jpeg" data-desktop="images/300.jpeg">
<img src="images/300.jpeg">
</noscript>
<p>As you scroll down this page, images will load when they come on to the screen. The plugin keeps track of what has been loaded in sessionStorage and so if you refresh the page they will instantly load. To go back to lazyLoading them, click the "clear the cache" above. You can also resize the window under 600px to see how it loads up a mobile sized image.</p>
<p>Lorem ipsum Nulla elit eu labore ex incididunt aliquip nulla minim adipisicing irure enim aute enim aliquip veniam laborum nostrud laborum do esse enim anim pariatur fugiat in Duis incididunt Duis deserunt et nostrud fugiat officia voluptate dolore Ut pariatur fugiat quis reprehenderit sint in dolor sunt labore sed ullamco occaecat Excepteur consequat dolore laboris labore non ex elit qui velit fugiat do nostrud laborum culpa dolor consequat dolor consectetur minim cupidatat mollit minim deserunt cupidatat non sit in minim eiusmod deserunt veniam in reprehenderit minim dolore cillum ullamco sunt ex magna esse qui laborum ut dolor exercitation cillum laboris eiusmod aliquip sit non proident amet consectetur nostrud irure ullamco et sint consectetur fugiat ullamco deserunt in in officia ex officia occaecat nulla pariatur esse dolore cillum in irure irure eu dolore cillum Excepteur fugiat nisi nisi Excepteur elit et elit est nisi nostrud aute Excepteur culpa quis ut velit voluptate qui ad nostrud labore officia culpa ea voluptate culpa cillum quis officia fugiat sunt adipisicing nisi nostrud nulla aute reprehenderit aliqua nostrud nulla sunt incididunt est qui dolor adipisicing quis Excepteur sed tempor quis commodo esse voluptate magna est est aliquip culpa.</p>
<p>Lorem ipsum Nulla elit eu labore ex incididunt aliquip nulla minim adipisicing irure enim aute enim aliquip veniam laborum nostrud laborum do esse enim anim pariatur fugiat in Duis incididunt Duis deserunt et nostrud fugiat officia voluptate dolore Ut pariatur fugiat quis reprehenderit sint in dolor sunt labore sed ullamco occaecat Excepteur consequat dolore laboris labore non ex elit qui velit fugiat do nostrud laborum culpa dolor consequat dolor consectetur minim cupidatat mollit minim deserunt cupidatat non sit in minim eiusmod deserunt veniam in reprehenderit minim dolore cillum ullamco sunt ex magna esse qui laborum ut dolor exercitation cillum laboris eiusmod aliquip sit non proident amet consectetur nostrud irure ullamco et sint consectetur fugiat ullamco deserunt in in officia ex officia occaecat nulla pariatur esse dolore cillum in irure irure eu dolore cillum Excepteur fugiat nisi nisi Excepteur elit et elit est nisi nostrud aute Excepteur culpa quis ut velit voluptate qui ad nostrud labore officia culpa ea voluptate culpa cillum quis officia fugiat sunt adipisicing nisi nostrud nulla aute reprehenderit aliqua nostrud nulla sunt incididunt est qui dolor adipisicing quis Excepteur sed tempor quis commodo esse voluptate magna est est aliquip culpa.</p>
<noscript class="lazy" data-mobile="images/101.jpeg" data-desktop="images/301.jpeg">
<img src="images/301.jpeg">
</noscript>
<p>Lorem ipsum Nulla elit eu labore ex incididunt aliquip nulla minim adipisicing irure enim aute enim aliquip veniam laborum nostrud laborum do esse enim anim pariatur fugiat in Duis incididunt Duis deserunt et nostrud fugiat officia voluptate dolore Ut pariatur fugiat quis reprehenderit sint in dolor sunt labore sed ullamco occaecat Excepteur consequat dolore laboris labore non ex elit qui velit fugiat do nostrud laborum culpa dolor consequat dolor consectetur minim cupidatat mollit minim deserunt cupidatat non sit in minim eiusmod deserunt veniam in reprehenderit minim dolore cillum ullamco sunt ex magna esse qui laborum ut dolor exercitation cillum laboris eiusmod aliquip sit non proident amet consectetur nostrud irure ullamco et sint consectetur fugiat ullamco deserunt in in officia ex officia occaecat nulla pariatur esse dolore cillum in irure irure eu dolore cillum Excepteur fugiat nisi nisi Excepteur elit et elit est nisi nostrud aute Excepteur culpa quis ut velit voluptate qui ad nostrud labore officia culpa ea voluptate culpa cillum quis officia fugiat sunt adipisicing nisi nostrud nulla aute reprehenderit aliqua nostrud nulla sunt incididunt est qui dolor adipisicing quis Excepteur sed tempor quis commodo esse voluptate magna est est aliquip culpa.</p>
<p>Lorem ipsum Nulla elit eu labore ex incididunt aliquip nulla minim adipisicing irure enim aute enim aliquip veniam laborum nostrud laborum do esse enim anim pariatur fugiat in Duis incididunt Duis deserunt et nostrud fugiat officia voluptate dolore Ut pariatur fugiat quis reprehenderit sint in dolor sunt labore sed ullamco occaecat Excepteur consequat dolore laboris labore non ex elit qui velit fugiat do nostrud laborum culpa dolor consequat dolor consectetur minim cupidatat mollit minim deserunt cupidatat non sit in minim eiusmod deserunt veniam in reprehenderit minim dolore cillum ullamco sunt ex magna esse qui laborum ut dolor exercitation cillum laboris eiusmod aliquip sit non proident amet consectetur nostrud irure ullamco et sint consectetur fugiat ullamco deserunt in in officia ex officia occaecat nulla pariatur esse dolore cillum in irure irure eu dolore cillum Excepteur fugiat nisi nisi Excepteur elit et elit est nisi nostrud aute Excepteur culpa quis ut velit voluptate qui ad nostrud labore officia culpa ea voluptate culpa cillum quis officia fugiat sunt adipisicing nisi nostrud nulla aute reprehenderit aliqua nostrud nulla sunt incididunt est qui dolor adipisicing quis Excepteur sed tempor quis commodo esse voluptate magna est est aliquip culpa.</p>
<noscript class="lazy" data-mobile="images/102.jpeg" data-desktop="images/302.jpeg">
<img src="images/302.jpeg">
</noscript>
<p>Lorem ipsum Nulla elit eu labore ex incididunt aliquip nulla minim adipisicing irure enim aute enim aliquip veniam laborum nostrud laborum do esse enim anim pariatur fugiat in Duis incididunt Duis deserunt et nostrud fugiat officia voluptate dolore Ut pariatur fugiat quis reprehenderit sint in dolor sunt labore sed ullamco occaecat Excepteur consequat dolore laboris labore non ex elit qui velit fugiat do nostrud laborum culpa dolor consequat dolor consectetur minim cupidatat mollit minim deserunt cupidatat non sit in minim eiusmod deserunt veniam in reprehenderit minim dolore cillum ullamco sunt ex magna esse qui laborum ut dolor exercitation cillum laboris eiusmod aliquip sit non proident amet consectetur nostrud irure ullamco et sint consectetur fugiat ullamco deserunt in in officia ex officia occaecat nulla pariatur esse dolore cillum in irure irure eu dolore cillum Excepteur fugiat nisi nisi Excepteur elit et elit est nisi nostrud aute Excepteur culpa quis ut velit voluptate qui ad nostrud labore officia culpa ea voluptate culpa cillum quis officia fugiat sunt adipisicing nisi nostrud nulla aute reprehenderit aliqua nostrud nulla sunt incididunt est qui dolor adipisicing quis Excepteur sed tempor quis commodo esse voluptate magna est est aliquip culpa.</p>
<p>Lorem ipsum Nulla elit eu labore ex incididunt aliquip nulla minim adipisicing irure enim aute enim aliquip veniam laborum nostrud laborum do esse enim anim pariatur fugiat in Duis incididunt Duis deserunt et nostrud fugiat officia voluptate dolore Ut pariatur fugiat quis reprehenderit sint in dolor sunt labore sed ullamco occaecat Excepteur consequat dolore laboris labore non ex elit qui velit fugiat do nostrud laborum culpa dolor consequat dolor consectetur minim cupidatat mollit minim deserunt cupidatat non sit in minim eiusmod deserunt veniam in reprehenderit minim dolore cillum ullamco sunt ex magna esse qui laborum ut dolor exercitation cillum laboris eiusmod aliquip sit non proident amet consectetur nostrud irure ullamco et sint consectetur fugiat ullamco deserunt in in officia ex officia occaecat nulla pariatur esse dolore cillum in irure irure eu dolore cillum Excepteur fugiat nisi nisi Excepteur elit et elit est nisi nostrud aute Excepteur culpa quis ut velit voluptate qui ad nostrud labore officia culpa ea voluptate culpa cillum quis officia fugiat sunt adipisicing nisi nostrud nulla aute reprehenderit aliqua nostrud nulla sunt incididunt est qui dolor adipisicing quis Excepteur sed tempor quis commodo esse voluptate magna est est aliquip culpa.</p>
<noscript class="lazy" data-mobile="images/103.jpeg" data-desktop="images/303.jpeg">
<img src="images/303.jpeg">
</noscript>
<p>Lorem ipsum Nulla elit eu labore ex incididunt aliquip nulla minim adipisicing irure enim aute enim aliquip veniam laborum nostrud laborum do esse enim anim pariatur fugiat in Duis incididunt Duis deserunt et nostrud fugiat officia voluptate dolore Ut pariatur fugiat quis reprehenderit sint in dolor sunt labore sed ullamco occaecat Excepteur consequat dolore laboris labore non ex elit qui velit fugiat do nostrud laborum culpa dolor consequat dolor consectetur minim cupidatat mollit minim deserunt cupidatat non sit in minim eiusmod deserunt veniam in reprehenderit minim dolore cillum ullamco sunt ex magna esse qui laborum ut dolor exercitation cillum laboris eiusmod aliquip sit non proident amet consectetur nostrud irure ullamco et sint consectetur fugiat ullamco deserunt in in officia ex officia occaecat nulla pariatur esse dolore cillum in irure irure eu dolore cillum Excepteur fugiat nisi nisi Excepteur elit et elit est nisi nostrud aute Excepteur culpa quis ut velit voluptate qui ad nostrud labore officia culpa ea voluptate culpa cillum quis officia fugiat sunt adipisicing nisi nostrud nulla aute reprehenderit aliqua nostrud nulla sunt incididunt est qui dolor adipisicing quis Excepteur sed tempor quis commodo esse voluptate magna est est aliquip culpa.</p>
<p>Lorem ipsum Nulla elit eu labore ex incididunt aliquip nulla minim adipisicing irure enim aute enim aliquip veniam laborum nostrud laborum do esse enim anim pariatur fugiat in Duis incididunt Duis deserunt et nostrud fugiat officia voluptate dolore Ut pariatur fugiat quis reprehenderit sint in dolor sunt labore sed ullamco occaecat Excepteur consequat dolore laboris labore non ex elit qui velit fugiat do nostrud laborum culpa dolor consequat dolor consectetur minim cupidatat mollit minim deserunt cupidatat non sit in minim eiusmod deserunt veniam in reprehenderit minim dolore cillum ullamco sunt ex magna esse qui laborum ut dolor exercitation cillum laboris eiusmod aliquip sit non proident amet consectetur nostrud irure ullamco et sint consectetur fugiat ullamco deserunt in in officia ex officia occaecat nulla pariatur esse dolore cillum in irure irure eu dolore cillum Excepteur fugiat nisi nisi Excepteur elit et elit est nisi nostrud aute Excepteur culpa quis ut velit voluptate qui ad nostrud labore officia culpa ea voluptate culpa cillum quis officia fugiat sunt adipisicing nisi nostrud nulla aute reprehenderit aliqua nostrud nulla sunt incididunt est qui dolor adipisicing quis Excepteur sed tempor quis commodo esse voluptate magna est est aliquip culpa.</p>
<noscript class="lazy" data-mobile="images/104.jpeg" data-desktop="images/304.jpeg">
<img src="images/304.jpeg">
</noscript>
<p>Lorem ipsum Nulla elit eu labore ex incididunt aliquip nulla minim adipisicing irure enim aute enim aliquip veniam laborum nostrud laborum do esse enim anim pariatur fugiat in Duis incididunt Duis deserunt et nostrud fugiat officia voluptate dolore Ut pariatur fugiat quis reprehenderit sint in dolor sunt labore sed ullamco occaecat Excepteur consequat dolore laboris labore non ex elit qui velit fugiat do nostrud laborum culpa dolor consequat dolor consectetur minim cupidatat mollit minim deserunt cupidatat non sit in minim eiusmod deserunt veniam in reprehenderit minim dolore cillum ullamco sunt ex magna esse qui laborum ut dolor exercitation cillum laboris eiusmod aliquip sit non proident amet consectetur nostrud irure ullamco et sint consectetur fugiat ullamco deserunt in in officia ex officia occaecat nulla pariatur esse dolore cillum in irure irure eu dolore cillum Excepteur fugiat nisi nisi Excepteur elit et elit est nisi nostrud aute Excepteur culpa quis ut velit voluptate qui ad nostrud labore officia culpa ea voluptate culpa cillum quis officia fugiat sunt adipisicing nisi nostrud nulla aute reprehenderit aliqua nostrud nulla sunt incididunt est qui dolor adipisicing quis Excepteur sed tempor quis commodo esse voluptate magna est est aliquip culpa.</p>
<p>Lorem ipsum Nulla elit eu labore ex incididunt aliquip nulla minim adipisicing irure enim aute enim aliquip veniam laborum nostrud laborum do esse enim anim pariatur fugiat in Duis incididunt Duis deserunt et nostrud fugiat officia voluptate dolore Ut pariatur fugiat quis reprehenderit sint in dolor sunt labore sed ullamco occaecat Excepteur consequat dolore laboris labore non ex elit qui velit fugiat do nostrud laborum culpa dolor consequat dolor consectetur minim cupidatat mollit minim deserunt cupidatat non sit in minim eiusmod deserunt veniam in reprehenderit minim dolore cillum ullamco sunt ex magna esse qui laborum ut dolor exercitation cillum laboris eiusmod aliquip sit non proident amet consectetur nostrud irure ullamco et sint consectetur fugiat ullamco deserunt in in officia ex officia occaecat nulla pariatur esse dolore cillum in irure irure eu dolore cillum Excepteur fugiat nisi nisi Excepteur elit et elit est nisi nostrud aute Excepteur culpa quis ut velit voluptate qui ad nostrud labore officia culpa ea voluptate culpa cillum quis officia fugiat sunt adipisicing nisi nostrud nulla aute reprehenderit aliqua nostrud nulla sunt incididunt est qui dolor adipisicing quis Excepteur sed tempor quis commodo esse voluptate magna est est aliquip culpa.</p>
<noscript class="lazy" data-mobile="images/105.jpeg" data-desktop="images/305.jpeg">
<img src="images/305.jpeg">
</noscript>
<p>Lorem ipsum Nulla elit eu labore ex incididunt aliquip nulla minim adipisicing irure enim aute enim aliquip veniam laborum nostrud laborum do esse enim anim pariatur fugiat in Duis incididunt Duis deserunt et nostrud fugiat officia voluptate dolore Ut pariatur fugiat quis reprehenderit sint in dolor sunt labore sed ullamco occaecat Excepteur consequat dolore laboris labore non ex elit qui velit fugiat do nostrud laborum culpa dolor consequat dolor consectetur minim cupidatat mollit minim deserunt cupidatat non sit in minim eiusmod deserunt veniam in reprehenderit minim dolore cillum ullamco sunt ex magna esse qui laborum ut dolor exercitation cillum laboris eiusmod aliquip sit non proident amet consectetur nostrud irure ullamco et sint consectetur fugiat ullamco deserunt in in officia ex officia occaecat nulla pariatur esse dolore cillum in irure irure eu dolore cillum Excepteur fugiat nisi nisi Excepteur elit et elit est nisi nostrud aute Excepteur culpa quis ut velit voluptate qui ad nostrud labore officia culpa ea voluptate culpa cillum quis officia fugiat sunt adipisicing nisi nostrud nulla aute reprehenderit aliqua nostrud nulla sunt incididunt est qui dolor adipisicing quis Excepteur sed tempor quis commodo esse voluptate magna est est aliquip culpa.</p>
<p>Lorem ipsum Nulla elit eu labore ex incididunt aliquip nulla minim adipisicing irure enim aute enim aliquip veniam laborum nostrud laborum do esse enim anim pariatur fugiat in Duis incididunt Duis deserunt et nostrud fugiat officia voluptate dolore Ut pariatur fugiat quis reprehenderit sint in dolor sunt labore sed ullamco occaecat Excepteur consequat dolore laboris labore non ex elit qui velit fugiat do nostrud laborum culpa dolor consequat dolor consectetur minim cupidatat mollit minim deserunt cupidatat non sit in minim eiusmod deserunt veniam in reprehenderit minim dolore cillum ullamco sunt ex magna esse qui laborum ut dolor exercitation cillum laboris eiusmod aliquip sit non proident amet consectetur nostrud irure ullamco et sint consectetur fugiat ullamco deserunt in in officia ex officia occaecat nulla pariatur esse dolore cillum in irure irure eu dolore cillum Excepteur fugiat nisi nisi Excepteur elit et elit est nisi nostrud aute Excepteur culpa quis ut velit voluptate qui ad nostrud labore officia culpa ea voluptate culpa cillum quis officia fugiat sunt adipisicing nisi nostrud nulla aute reprehenderit aliqua nostrud nulla sunt incididunt est qui dolor adipisicing quis Excepteur sed tempor quis commodo esse voluptate magna est est aliquip culpa.</p>
<noscript class="lazy" data-mobile="images/106.jpeg" data-desktop="images/306.jpeg">
<img src="images/306.jpeg">
</noscript>
<script src="lib/jquery.min.js"></script>
<script src="dist/lds.lazyLoad.js"></script>
<script>
window.addEventListener("DOMContentLoaded", function () {
$("body").lazyLoad({
onload:function(){
// make sure onload is working
console.debug("onload fired");
$(".onload").text("yes "+$(".onload").text());
}
});
});
$(".clearcache").on("click",function(e){
e.preventDefault();
sessionStorage.clear();
window.location.reload();
});
</script>
</body>
</html>