-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathindex.html
196 lines (175 loc) · 6.59 KB
/
index.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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>lazy-image demo</title>
<!-- Some styles to make the demo purty -->
<link rel="stylesheet" href="demo-styles.css">
<!-- Custom elements + Shady DOM polyfill -->
<script src="./bower_components/webcomponentsjs/webcomponents-sd-ce.js"></script>
<script src="lazy-image.js"></script>
<style>
lazy-image {
display: inline-block;
padding: 10px;
width: 30%;
background-color: #F5F5F5;
text-align: center;
cursor: default;
}
lazy-image[active] {
animation: fade-in 2000ms both;
background-color: transparent;
}
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
#container {
width: 100%;
margin: 0 auto;
}
#container lazy-image {
display: block;
width: 100%;
padding: 10px 0;
}
</style>
</head>
<body>
<h1><lazy-image></h1>
<h2>📖 Docs</h2>
<section>
<code><lazy-image></code> is a custom element that contains an image that has the
option to be loaded only on-demand, for performance reasons. If a <code><lazy-image></code>
is inactive, then its source is not loaded (the XHR won't be made until the
<code>active</code> attribute is set on the element). See the
<a href="https://github.com/notwaldorf/lazy-image">code</a> on GitHub.
</section>
<section>
<code><lazy-image></code> has the following attributes:
<ul>
<li><b><code>active</code></b>, whether the image should be loaded or not</li>
<li><b><code>alt</code></b>, the alternate text for the image the image source (like you would use with a <code><img></code>)</li></li>
<li><b><code>src</code></b>, the image source (like you would use with a <code><img></code>)</li>
<li><b><code>srcset</code></b>, the image source (like you would use with a <code><img></code>)</li>
</ul>
</section>
<h2>🎬 On-demand loading</h2>
<section>
For an image to load, it must have the <code>active</code> property set to <code>true</code>.
In the example below, the images will only load when clicked (you can check the network tab in
your favourite developer tools to see that there's no initial request for these files).
This happens because they each start off with the <code>active</code> property set to <code>false</code>,
and have a <code>click</code> event listener, that
sets it to <code>true</code>:<br><br>
<b>Code</b>
<pre><code>
<lazy-image src="..." alt="..." id="i"></lazy-image>
<lazy-image alt="..." srcset="... 1x, ... 2x"></lazy-image>
<script>
i.addEventListener('click', function() {
if (!this.active)
this.active = true;
});
</script>
</pre></code>
<b>Demo using src</b><br>
<p>(Click on an image to load it)</p>
<lazy-image class="inactive one" src="./images/unsplash-it-1084.jpeg" alt="sample 1"></lazy-image>
<lazy-image class="inactive one" src="./images/unsplash-it-1080.jpeg" alt="sample 2"></lazy-image>
<lazy-image class="inactive one" src="./images/unsplash-it-1059.jpeg" alt="sample 3"></lazy-image>
<br><br>
<b>Demo using srcset</b><br>
<lazy-image class="inactive one" alt="sample 4"
srcset="./images/image-1x.png 1x, ./images/image-2x.png 2x">
</lazy-image>
<br><br>
<b>Demo using shadow DOM</b><br>
<lazy-image as-decorator class="inactive one" src="./images/unsplash-it-1084.jpeg" alt="shadow sample"></lazy-image>
<br><br>
<b>Note:</b><br>
If you want to have some global setting that controlls all <code><lazy-image></code>
on the page (i.e. activates or deactivates <i>all</i> of them), you can set the
<code>window.LazyImageSiteDefaultActive</code> global before loading the
<code>lazy-image.js</code> script.
</section>
<h2>🎬 Intersection Observer</h2>
<section>
Intersection observers let you figure out when an element enters into view.
Combined with a <code><lazy-image></code>, this lets you only load
images that are scrolled into view, while leaving images at the bottom
of the page that haven't been seen inactive.<br><br>
<b>Code</b><br>
<pre><code>
// Create an observer.
var observer = new IntersectionObserver(onChange, {
threshold: [0.5] // rootMargin: '50% 0%'
});
// That observes all the random images we've created.
els.forEach(el => observer.observe(el));
// Whenever we scroll...
function onChange(changes) {
changes.forEach(change => {
var el = change.target;
if (!el.active)
el.active = true;
observer.unobserve(el); // Don't care anymore.
});
}
</pre></code>
<b>IntersectionObserver demo</b> (this demo only works in Chrome, Edge and FF nightly.
👀 <a href="http://caniuse.com/#feat=intersectionobserver">caniuse</a> for
updates)<br>
<div id="container"></div>
</section>
<h2>😘, monica</h2>
<script>
(function(){
// Set up the on-demand demo.
var images = document.querySelectorAll('lazy-image.inactive.one');
images.forEach(function(image) {
image.addEventListener('click', function() {
if (!image.active)
image.active = true;
});
});
if (!window.IntersectionObserver) {
return;
}
// Generate some random images.
var els = [];
var container = document.getElementById('container');
var count = 20;
while (count--) {
var el = document.createElement('lazy-image');
el.className = 'inactive';
var random = Math.floor(Math.random() * 100) + 1;
el.src = 'https://unsplash.it/300/100?image=' + random;
el.alt = 'random image ' + count;
container.appendChild(el);
els.push(el);
}
// Create an observer.
var observer = new IntersectionObserver(onChange, {
threshold: [0.5] // rootMargin: '50% 0%'
});
// That observes all the random images we've created.
els.forEach(el => observer.observe(el));
// Whenever we scroll...
function onChange(changes) {
changes.forEach(change => {
var el = change.target;
if (!el.active && change.isIntersecting) {
el.active = true;
// We already loaded this image, so we don't care about it anymore.
observer.unobserve(el);
}
});
}
})();
</script>
</body>
</html>