forked from verlok/vanilla-lazyload
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
415 lines (387 loc) · 22.2 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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
<title>
Lazyload - a fast, lightweight and flexible script for loading images when they enter the viewport
</title>
<style type="text/css">
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape while allowing user zoom */
}
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
line-height: 1.5em;
margin: 0;
padding: 0;
}
h1, h2, h3, h4 {
margin: 1.2em 0 .5em;
/*font-family: Georgia, serif;*/
border-bottom: 1px solid #EEE;
padding-bottom: .66em;
}
article {
margin:1rem auto;
max-width: 50rem;
overflow-x: auto;
padding: 1rem;
}
@media screen and (min-width: 480px) {
article {
padding: 2rem;
border: 1px solid #EEE;
}
}
article h1 {
font-size: 2.2rem;
}
article h2 {
font-size: 1.8rem;
}
article h3 {
font-size: 1.5rem;
}
h1:first-child {
margin-top: .2em;
}
a {
text-decoration: none;
}
a:link {
color: #049ed3;
}
a:visited {
color: #0091ff;
}
.container {
overflow-x: hidden;
position: relative;
}
.corner {
background: #ffd600;
padding: 0.2rem 3rem;
text-decoration: none;
position: absolute;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
top: 8.5rem;
right: -2rem;
transition: all .2s;
box-shadow: rgba(0,0,0,.2) 0 0 .5em;
}
.corner:link,
.corner:visited {
color: black;
}
.corner:hover {
top: 8.8rem;
right: -1.7rem;
background: #ffec00;
}
table {
border-collapse: collapse;
}
td, th {
padding: 5px;
text-align: left;
vertical-align: top;
border: 1px solid #ccc;
}
@media (max-width: 320px) {
td:nth-child(3),
th:nth-child(3) {
display: none;
}
}
tbody tr:nth-child(odd) {
background: #f8f8f8;
}
thead tr {
background: #333;
color: white;
}
.results ul,
.results li {
list-style-type: none;
margin: 0;
padding: 0;
}
code:not([class]) {
padding: 0.2em 0.5em;
background-color: #f8f8f8;
border-radius: 0.33rem;
color: #d14;
border: 1px solid #DDD;
}
code[class] {
padding: 1rem;
border-left: 10px dotted #EEE;
display: block;
overflow-x: auto;
border-radius: .33rem;
}
table code:not([class]) {
padding: 0;
}
</style>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/default.min.css">
</head>
<body>
<div class="container">
<a class="corner" href="https://github.com/verlok/lazyload">Fork me on GitHub</a>
<!-- ARTICLE START -->
<article class="markdown-body"><h1 id="lazyload"><a name="user-content-lazyload" href="#lazyload" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>LazyLoad</h1>
<p><em>LazyLoad</em> is a fast, lightweight and flexible script for <strong>loading images only when they’re about to enter the viewport</strong> of a scrollable area, which <strong>supports the <code>srcset</code> attribute</strong> and with and <strong>takes best advantage from the progressive JPEG image format</strong> (which is <a href="http://blog.patrickmeenan.com/2013/06/progressive-jpegs-ftw.html">good for performance</a>).</p>
<p><a href="http://verlok.github.io/lazyload/">WEBSITE</a> | <a href="#user-content-demos">DEMOS</a> | <a href="https://github.com/verlok/lazyload">GITHUB</a> </p>
<h2 id="difference-with-jquery95lazyload"><a name="user-content-difference-with-jquery95lazyload" href="#difference-with-jquery95lazyload" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Difference with jQuery_lazyload</h2>
<p>This script was inspired by <a href="https://github.com/tuupola/">Mika Tuupola</a>‘s <a href="http://www.appelsiini.net/projects/lazyload">jQuery_lazyLoad</a>.<br />
The following are the main differences between the scripts.</p>
<ul>
<li><strong><em>LazyLoad</em> is 6x faster than <em>jQuery_lazyload</em></strong>. This is because <em>LazyLoad</em> uses only optimized, native javascript functions and methods, and not jQuery. Your users will see the difference, even in slow devices or computers. To measure the scripts performance yourself, see <a href="http://verlok.github.io/lazyload/demos/perf/with_lazyLoad.html">lazyLoad</a> and <a href="http://verlok.github.io/lazyload/demos/perf/with_jQuery_lazyLoad.html">jQuery_lazyLoad</a> implementations in the <em>perf</em> folder.</li>
<li><strong>Progressive JPEG support will improve perceived speed</strong>. <a href="http://blog.patrickmeenan.com/2013/06/progressive-jpegs-ftw.html">Progressive JPEG</a> is an image format good for perceived performance because it’s rendered in progressive passes of detail. <code>lazyLoad</code> has an option called <code>show_while_loading</code> that, when set to <code>true</code>, shows your images while they load, letting <em>progressive JPEG</em> do its magic. As <em>jQuery_lazyload</em> doesn’t have this option, it will only show your images once fully loaded.</li>
<li><strong><em>LazyLoad</em> can be instanced on many scrolling containers</strong> on the same page, whereas <em>jQuery_lazyload</em> can’t.</li>
<li><strong>Throttled execution for optimized CPU usage</strong>. <em>LazyLoad</em>‘s listener to the container’s <code>scroll</code> event is throttled by default, meaning that the main function of the script will not continuously be executed on devices with a smooth scroll such as mobile devices or Macs. <em>jQuery_lazyload</em> doesn’t have this option, so its scroll handler function is executed more frequently then necessary, slowing down the user device.</li>
<li><strong>Support for <code>srcset</code> attribute</strong>. <em>LazyLoad</em> also supports the srcset attribute, today supported in modern browsers to provide HD images for high-density displays (aka Retina display).</li>
<li><strong>jQuery independency</strong>. As <em>LazyLoad</em> doesn’t rely on jQuery, you can use it in contexts where jQuery is not available.</li>
</ul>
<h2 id="how-to-use"><a name="user-content-how-to-use" href="#how-to-use" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>How to use</h2>
<h4 id="html-img-tags"><a name="user-content-html-img-tags" href="#html-img-tags" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>HTML - <code>img</code> tags</h4>
<p>Markup your images putting the image source inside the <code>data-original</code> attribute.<br />
Specify both <code>width</code> and <code>height</code> attributes so the browser can allocate the space on your page.</p>
<pre><code class="html"><img data-original="/your/image1.jpg" width="100" height="172">
<img data-original="/your/image2.jpg" width="100" height="172">
<img data-original="/your/image3.jpg" width="100" height="172">
</code></pre>
<p>Or if you want to use <code>srcset</code>:</p>
<pre><code class="html"><img data-original="/your/image1.jpg"
data-original-set="/your/image1.jpg 1x, /your/image1@2x.jpg 2x"
width="100" height="172">
<img data-original="/your/image2.jpg"
data-original-set="/your/image2.jpg 1x, /your/image2@2x.jpg 2x"
width="100" height="172">
<img data-original="/your/image3.jpg"
data-original-set="/your/image3.jpg 1x, /your/image3@2x.jpg 2x"
width="100" height="172">
</code></pre>
<p>Or if you want to use <code>srcset</code> and <code>sizes</code>:</p>
<pre><code class="html"><img data-original="/your/image1.jpg"
data-original-set="/your/image1.jpg 200w, /your/image1@2x.jpg 400w"
sizes="(min-width: 20em) 35vw, 100vw">
<img data-original="/your/image2.jpg"
data-original-set="/your/image2.jpg 200x, /your/image2@2x.jpg 400w"
sizes="(min-width: 20em) 35vw, 100vw">
<img data-original="/your/image3.jpg"
data-original-set="/your/image3.jpg 200w, /your/image3@2x.jpg 400w"
sizes="(min-width: 20em) 35vw, 100vw">
</code></pre>
<p><strong>Note</strong> that not all the images in the page needs to be lazy loaded. You can leave the first images (the amount that you’re quite sure that fits in the majority of viewports) loaded normally, then start lazy loading the rest.</p>
<h4 id="html-script-tag"><a name="user-content-html-script-tag" href="#html-script-tag" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>HTML - <code>script</code> tag</h4>
<p>Include the script in the bottom of your HTML page, just before the closing <code></body></code> tag.</p>
<pre><code class="html"><body>
<!-- Your content ... -->
<script src="lazyload.min.js"></script>
</body>
</code></pre>
<h4 id="javascript"><a name="user-content-javascript" href="#javascript" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Javascript</h4>
<p>In your javascript code, create an instance of LazyLoad, doing so:</p>
<pre><code class="javascript">var myLazyLoad = new LazyLoad();
</code></pre>
<p>Or, if you want to customize the behaviour of <code>LazyLoad</code> passing some options in, you can do so:</p>
<pre><code class="javascript">var myLazyLoad = new LazyLoad({
// example of options object -> see options section
threshold: 500,
container: document.getElementById('scrollPane'),
elements_selector: ".showCase img",
throttle: 30,
data_src: "src",
data_srcset: "srcset",
show_while_loading: true,
callback_set: function() { /* ... */ }
});
</code></pre>
<p>See the <a href="#demos">demos</a> and <a href="#options">options</a> sections for further defails.</p>
<h4 id="css"><a name="user-content-css" href="#css" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>CSS</h4>
<p>Be sure that the images that are going to be lazy loaded <strong>occupy the same space of loaded images (*)</strong>.</p>
<p>To do that, you can either set a placeholder image in your HTML (which nullifies the effect of the <code>show_while_loading</code> option), or you can size all your <code>img</code> elements using CSS, for example doing this:</p>
<pre><code class="css">/* Sets a min-height to all images
so that they occupy some space
before they are loaded */
img {
display: block;
width: 100%;
height: auto;
min-height: 300px;
}
</code></pre>
<p>In addition, something needs to be done to avoid the “broken image” icon to appear when the <code>img</code> element without the <code>src</code> attribute enters the viewport.</p>
<pre><code class="css">/* Prevents img without src to appear */
img:not([src]) {
visibility: hidden;
}
</code></pre>
<p>Furthermore, if we are using the <code>show_while_loading</code> option, we need to deal with a Firefox anomaly that still shows the “broken image” icon while the image is loading. The CSS code that does this trick is the following:</p>
<pre><code class="css">/* Fixes Firefox anomaly */
@-moz-document url-prefix() {
img:-moz-loading {
visibility: hidden;
}
}
</code></pre>
<p>(*) if you won’t do so, a lot of images would enter the viewport as the user scrolls down, so you would lose the advantages that LazyLoad would bring to your website. </p>
<h2 id="options"><a name="user-content-options" href="#options" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Options</h2>
<p>For every instance of <em>LazyLoad</em> you can pass in some options, to alter its default behaviour.<br />
Here’s the list of the options.</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Meaning</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>container</code></td>
<td>The container in which to start searching for elements, and from which to listen to the scroll event</td>
<td><code>window</code></td>
</tr>
<tr>
<td><code>elements_selector</code></td>
<td>The selector of the image elements inside the container</td>
<td><code>"img"</code></td>
</tr>
<tr>
<td><code>threshold</code></td>
<td>The distance out of the viewport, expressed in pixel, before which to start loading the images</td>
<td><code>300</code></td>
</tr>
<tr>
<td><code>throttle</code></td>
<td>The time that has to pass between one element parsing and the following, when fast scroll events occur</td>
<td><code>40</code></td>
</tr>
<tr>
<td><code>data_src</code></td>
<td>The name of the data attribute containing the original image source. The “data-” is automatically added.</td>
<td><code>"original"</code></td>
</tr>
<tr>
<td><code>data_srcset</code></td>
<td>The name of the data attribute containing the original image source set. The “data-” is automatically added. If you also need to add the <code>sizes</code> attribute, you can do it directly to you <code>img</code> tag, as <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img"><code>sizes</code> gets ignored when the <code>srcset</code> attribute is missing</a> .</td>
<td><code>"original-set"</code></td>
</tr>
<tr>
<td><code>class_loading</code></td>
<td>The class applied to the elements while the loading is in progress</td>
<td><code>"loading"</code></td>
</tr>
<tr>
<td><code>class_loaded</code></td>
<td>The class applied to the elements when the loading is complete</td>
<td><code>"loaded"</code></td>
</tr>
<tr>
<td><code>skip_invisible</code></td>
<td>Specifies whether the script has to consider invisible images or not</td>
<td><code>true</code></td>
</tr>
<tr>
<td><code>show_while_loading</code></td>
<td>Specifies whether the script must show the images while they are loading. Set it to true when you use progressive JPEG format for your images. <strong>Note</strong>: to make the image visible while loading, you will have to avoid using the <code>src</code> attribute in the <code>img</code> tag</td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>callback_load</code></td>
<td>A function to be called when an image was loaded.</td>
<td><code>null</code></td>
</tr>
<tr>
<td><code>callback_set</code></td>
<td>A function to be called when the src of an image is set in the DOM.</td>
<td><code>null</code></td>
</tr>
<tr>
<td><code>callback_processed</code></td>
<td>A function to be called when an image was processed.</td>
<td><code>null</code></td>
</tr>
<tr>
<td><code>placeholder</code></td>
<td>The URL of a placeholder image to be shown while the original image is loading. This option is ignored when the option <code>show_while_loading</code> is set to <code>true</code></td>
<td>(A base64 encoded 1x1 transp. gif)</td>
</tr>
</tbody>
</table>
<h2 id="public-methods"><a name="user-content-public-methods" href="#public-methods" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Public methods</h2>
<table>
<thead>
<tr>
<th>Method name</th>
<th>Effect</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>update()</code></td>
<td>Tells <em>LazyLoad</em> that new lazy images have arrived in the container, so it must start to manage them</td>
</tr>
<tr>
<td><code>destroy()</code></td>
<td>Destroys the instance, unsetting instance variables and removing listeners.</td>
</tr>
<tr>
<td><code>handleScroll()</code></td>
<td>A throttled scroll handler. This is called automatically from LazyLoad if the container element fires a <code>scroll</code> event, but it’s exposed as a public method to allow you to use LazyLoad otherwise (i.g. when using iScroll)</td>
</tr>
</tbody>
</table>
<h2 id="demos"><a name="user-content-demos" href="#demos" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Demos</h2>
<p>Learn how to use <em>LazyLoad</em> in different contexts by looking at the code.</p>
<h4 id="simple-demo"><a name="user-content-simple-demo" href="#simple-demo" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Simple demo</h4>
<p>The images are in the page body, so <em>LazyLoad</em> is created with the <strong>default options</strong>.</p>
<p><a href="http://verlok.github.io/lazyload/demos/simple.html">See it in action</a> | <a href="https://github.com/verlok/lazyload/blob/master/demos/simple.html">View source</a></p>
<h4 id="with-srcset-1x-2x-demo"><a name="user-content-with-srcset-1x-2x-demo" href="#with-srcset-1x-2x-demo" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>With <code>srcset</code> (1x 2x) demo</h4>
<p>The images also rely on the <strong><code>srcset</code> attribute</strong> to be loaded lazily. Just pass in the <code>data_srcset</code> option and the job will be done.</p>
<p><a href="http://verlok.github.io/lazyload/demos/with_srcset.html">See it in action</a> | <a href="https://github.com/verlok/lazyload/blob/master/demos/with_srcset.html">View source</a></p>
<h4 id="with-srcset-sizes-demo"><a name="user-content-with-srcset-sizes-demo" href="#with-srcset-sizes-demo" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>With <code>srcset</code> + <code>sizes</code> demo</h4>
<p>The images also rely on the <strong><code>srcset</code> attribute</strong> to be loaded lazily, and on the <code>sizes</code> attribute to be sized. Just pass in the <code>data_srcset</code> option, set the <code>sizes</code> attribute normally and the job will be done.</p>
<p><a href="http://verlok.github.io/lazyload/demos/with_srcset_sizes.html">See it in action</a> | <a href="https://github.com/verlok/lazyload/blob/master/demos/with_srcset_sizes.html">View source</a></p>
<h4 id="show-images-while-loading-demo"><a name="user-content-show-images-while-loading-demo" href="#show-images-while-loading-demo" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Show images while loading demo</h4>
<p>The images are in the page body, but as they are stored in the <strong>Progressive JPEG</strong> format we want them to be shown <strong>while loading</strong> and not only when they are fully loaded.</p>
<p><a href="http://verlok.github.io/lazyload/demos/show_while_loading.html">See it in action</a> | <a href="https://github.com/verlok/lazyload/blob/master/demos/show_while_loading.html">View source</a></p>
<h4 id="single-scrolling-container-demo"><a name="user-content-single-scrolling-container-demo" href="#single-scrolling-container-demo" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Single scrolling container demo</h4>
<p>The images are in <strong>scrolling container</strong>, a scrolling div inside the page body.</p>
<p><a href="http://verlok.github.io/lazyload/demos/single_container.html">See it in action</a> | <a href="https://github.com/verlok/lazyload/blob/master/demos/single_container.html">View source</a></p>
<h4 id="multiple-scrolling-containers-demo"><a name="user-content-multiple-scrolling-containers-demo" href="#multiple-scrolling-containers-demo" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Multiple scrolling containers demo</h4>
<p>The images are in <strong>multiple scrolling containers</strong>, two scrolling divs inside the page body.</p>
<p><a href="http://verlok.github.io/lazyload/demos/multiple_container.html">See it in action</a> | <a href="https://github.com/verlok/lazyload/blob/master/demos/multiple_container.html">View source</a></p>
<h4 id="changing-content-demo"><a name="user-content-changing-content-demo" href="#changing-content-demo" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Changing content demo</h4>
<p>The images are <strong>added in different times</strong>, simulating content that gets added by AJAX requests or other actions.</p>
<p><a href="http://verlok.github.io/lazyload/demos/dynamic_content.html">See it in action</a> | <a href="https://github.com/verlok/lazyload/blob/master/demos/dynamic_content.html">View source</a></p>
<h4 id="destroying-lazyload-demo"><a name="user-content-destroying-lazyload-demo" href="#destroying-lazyload-demo" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Destroying LazyLoad demo</h4>
<p>This demo shows how to <strong>destroy <em>LazyLoad</em> when you’re finished using it</strong>, to free up some memory.</p>
<p><a href="http://verlok.github.io/lazyload/demos/destroy.html">See it in action</a> | <a href="https://github.com/verlok/lazyload/blob/master/demos/destroy.html">View source</a></p>
<h2 id="browser-support"><a name="user-content-browser-support" href="#browser-support" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Browser support</h2>
<p>Browser support is starting from <strong>Internet Explorer 8</strong> up.<br />
Please mind that you can’t use CSS 3 selectors in IE8, so beware of them if you change the <code>elements_selector</code> default option.</p>
<h2 id="install"><a name="user-content-install" href="#install" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Install</h2>
<p>It’s time to give it a try and boost your website performance!</p>
<h5 id="download-from-github"><a name="user-content-download-from-github" href="#download-from-github" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Download from GitHub</h5>
<p>Download the package from GitHub and add dist/lazyload.min.js to your project files.</p>
<p><a href="https://github.com/verlok/lazyload/archive/master.zip">Zip file</a></p>
<h5 id="install-it-from-bower"><a name="user-content-install-it-from-bower" href="#install-it-from-bower" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Install it from bower</h5>
<p>Run the following command on your terminal or command prompt.</p>
<pre><code class="bash">bower install vanilla-lazyload
</code></pre></article>
<!-- ARTICLE END -->
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>