-
Notifications
You must be signed in to change notification settings - Fork 6
/
NativeLazy.html
158 lines (150 loc) · 6.44 KB
/
NativeLazy.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Native Lazy Loading With IOlazy</title>
<link rel="stylesheet" href="dist/css/demo.css">
<link rel="stylesheet" href="src/demo/css/prism.css">
</head>
<body>
<main>
<header class="container column">
<h1>Using Native Lazy loading with IOLazy</h1>
</header>
<section class="container column">
<h2>setup</h2>
<div class="numbered">
<p class="list-code-example">
Grab the latest release from <a href="https://github.com/cdowdy/io-lazyload/releases/latest">io-lazyload
releases</a>
</p>
<p class="list-code-example">
Or install it through NPM with <code class="language-bash">npm install iolazyload</code>
</p>
<p class="list-code-example">
add some inline javascript (or in your bundle however you choose) to check for the loading attribute, then apply our scripts.
</p>
<p class="list-code-example">
for every image you wish to lazyload add a <code class="language-markup">data-src</code> attribute, a <code class="language-markup">data-srcset</code> for your responsive images and the <code class="language-markup">loading='lazy'</code> attribute.
</p>
</div>
</section>
<section class="container column">
<p><b>Javascript Needed:</b></p>
<pre class="language-markup"><code><script>
if ('loading' in HTMLImageElement.prototype) {
// you could also use the class/id you use for the IOLazy library here for the images variable.
const images = document.querySelectorAll("img");
images.forEach( img => {
img.src = img.dataset.src;
// this if clause is only needed if you have __ANY__ images with a srcset attribute.
if (img.dataset.srcset) {
img.srcset = img.dataset.srcset;
}
});
} else {
let scriptEl = document.createElement('script');
// set the scripts attribute to 'async'
scriptEl.async = true;
// set the src of the script element to the IOlazy javascript file.
script.src = './path/to/iolazy.min.js';
// append this newly created script element to the end of the body of our page.
document.appendChild(scriptEl);
}
</script></code></pre>
<p><b>Markup needed for your images</b></p>
<p>
Add the <code class="language-markup"> data-src</code>, <code class="language-markup">data-srcset</code> and
<code class="language-markup">loading</code> attributes
</p>
<pre class="language-markup"><code><img sizes="(min-width: 530px) 25vw, 100vw"
data-srcset="your/image-177w.png 177w,
your/image-240w.png 240w,
your/image-321w.png 321w"
src="your/low/quality/placeholder.png"
alt="Your Alt Text"
class="lazyload"
loading="lazy"
></code></pre>
</section>
<div class="container">
<h2>example</h2>
</div>
<div class="container demos-photo-grid">
<figure class="lightbox-figure ">
<img id="six" sizes="25vw"
data-src="img/thumb/red_panda_stretching-th.jpg"
alt="a red panda being it's natural self which is awesome and is stretching"
src="img/thumb/red_panda_stretching-th.jpg"
class="lazyload"
loading="lazy"
width="100%" >
<figcaption>
<p class="center-text">
Red Panda Stretching By <a class="external-link" href="https://www.flickr.com/photos/ekilby/11061337434">Eric Kilby</a>
</p>
</figcaption>
</figure>
</div>
<section class="container column">
<h2>Troubleshooting</h2>
<p><b>Internet Explorer</b></p>
<p>
In order for the above check for loading in your page there is an arrow function used. Specifically:
</p>
<pre class="language-javascript"><code>images.forEach( img => { // this arrow function here
img.src = img.dataset.src;
// this if clause is only needed if you have __ANY__ images with a srcset attribute.
if (img.dataset.srcset) {
img.srcset = img.dataset.srcset;
}
});</code></pre>
<p>
You'll need to swap the arrow function out if you wish to support browsers that don't understand arrow functions. This can either be done inline or through your build step.
</p>
<pre class="language-javascript"><code>images.forEach( function (img) {
img.src = img.dataset.src;
if (img.dataset.srcset) {
img.srcset = img.dataset.srcset;
}
});</code></pre>
<p><b>Images wont show up and I've got all the right code</b></p>
<p>
You should double check to make sure you have a <code class="language-markup">src</code> attribute on your image tage. Some browsers wont swap out the newly swapped in image without an image or placeholder.
</p>
</section>
<div class="container">
<a href="index.html">back to IOLazy homepage</a>
</div>
</main>
<!-- demo code highlight -->
<script src="src/demo/js/prism.js" async></script>
<!-- intersection observer polyfill -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver" async></script>
<script>
if ('loading' in HTMLImageElement.prototype) {
console.log('loading available')
// you could also use the class/id you use for the IOLazy library here for the images variable.
const images = document.querySelectorAll('img');
console.log('loading')
images.forEach(function (img) {
img.src = img.dataset.src;
// this if clause is only needed if you have __ANY__ images with a srcset attribute.
if (img.dataset.srcset) {
img.srcset = img.dataset.srcset;
}
});
} else {
let scriptEl = document.createElement('script');
// set the scripts attribute to 'async'
scriptEl.async = true;
// set the src of the script element to the IOlazy javascript file.
scriptEl.src = './dist/js/iolazy.min.js';
// append this newly created script element to the end of the body of our page.
document.body.appendChild(scriptEl);
}
</script>
</body>
</html>