-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
41 lines (34 loc) · 1.22 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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>lazy-loader for scripts and images</title>
<style>
body {
margin: 0;
padding: 0;
text-align: center;
}
.bigbox {
width: 100%;
height: 2500px;
background-color: lightblue;
margin-bottom: 10px;
}
</style>
<script src="vendor.js"></script>
<script src="lazyloader.js"></script>
</head>
<body>
<span>Scroll down to lazy load a script and an image</span>
<div class="bigbox"></div>
<span data-lazyloadcontent="<div class='container'>My style was made with jQuery</div><script language='javascript'>$('.container').css({'width': '100%', 'height': '100px', 'background-color':'red'});</script>">lazy-loading an inline Script here</span>
<div class="bigbox"></div>
<span data-lazyloadcontent="<div style='background-color:#aaff9c'><img src='http://lorempixel.com/400/200/city' /></div>">lazy-loading an image here</span>
<div class="bigbox"></div>
<span data-lazyloadcontent="<div class='testtarget'><script language='javascript' src='assets/lazyloadme.js'></script>">lazy-loading an external Script here (probably won't work localy)</span>
<script>
$(lazyloader.init(300, 'append', 'data-lazyloadcontent'));
</script>
</body>
</html>