-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
191 lines (175 loc) · 9.08 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="yall - yet another lazyload library">
<meta name="keywords" content="yall, javascript, lazy load, lazyload, images">
<title>yall - yet another lazyload library</title>
<link rel="stylesheet" href="assets/style.min.css">
<script src="yall.min.js"></script>
<script>
var lazyload = new yall({callback:"log",rootMargin:"0px 0px -100px 500px"});
function log(a){
console.log(`loaded image with src= ${a.src}.`);
}
window.addEventListener('DOMContentLoaded', (e) => {
lazyload.run();
});
</script>
</head>
<body>
<header>
<h1>Yall</h1>
<h3>yet another lazyload library</h3>
<p>Yall is a small javascript library (2.47KB) that uses intersection observer to lazy load images (or start events on class added) and with the option to use a callback function on every intersection.</p>
<div class="links"><a href="#docs" title="documentation">Docs</a><a href="#examples" title="examples" >Examples</a><a href="https://github.com/giventofly/yall" rel="nofollow noopener" title="github">github</a></div>
</header>
<section class="documentation" id="docs">
<div class="withmargins">
<h2>What is intersection Observer and why would I want to lazy load images?</h2>
<p>From the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API" target="_blank" rel="noopener noffolow" title="mdn">mdn documentation</a>: "The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.", currently from the information from <a href="https://caniuse.com/#feat=intersectionobserver" target="_blank" rel="nofollow noopener" title="can i use">caniuse</a>, it has a global support of 87.85% and all modern web browsers now support it.</p>
<p>Lazy loading images is a best practice to request the assets only when they are indeed to be used, <a href="https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/" target="_blank" rel="nofollow noopener" title="google developers">google developers</a> talk about it.</p>
<h2>Will this break my site for users in older browsers?</h2>
<p>No, in that case it will load all images like lazyload is not present (use the minfied version that is transpilled using babeljs).</p>
<h2>And what about browsers that support the loading attribute?</h2>
<p>At this moment <a href="https://caniuse.com/#feat=loading-lazy-attr" target="_blank" rel="nofollow noopener" title="can i use support for loading">there is no browser supporting it</a> out of the box, but it also checks for that and make everything ready for it, but if you have other effects based on class change and callbacks you will need to refactor this.</p>
<h2>What events can I start or use a callback function?</h2>
<p>Since everytime an element is "intersected" a class is added you can use css animations or use a callback function that will receive the element being intersected.</p>
<h2>I'm ready to go, what do I need to do?</h2>
<p>You just need to load yall.js and create an instance and make it run - run again if you change the DOM. Elements just need the class "yall_lazy" - you can define your classname, and images need to not have src/srcset and have instead data-src/data-srcset attributes.</p>
<p>When an element is intersected the default class yall_loaded is added and the callback function is called.</p>
<pre>
<script src="yall.min.js"></script>
<script>
var lazyload = new yall();
window.addEventListener('DOMContentLoaded', (e) => {
lazyload.run();
});
</script>
<img class="yall_lazy" data-src="link-to-image">
<div class="yall_lazy">Text that will translate when the class yall_loaded is added.</div></pre>
<h2>Ok, what are my start options and API?</h2>
<p>A quick example with a callback function that will put output to the browser console the element src after it has been intersected:</p>
<pre>
<script>
var lazyload = new yall({callback:"log"});
function log(a){
console.log(`loaded image with src= ${a.src}.`);
}
window.addEventListener('DOMContentLoaded', (e) => {
lazyload.run();
});
</script></pre>
<p>The only method available after a instance is created is the .run() method that scans elements with the "yall_lazy" class that have not yet the class "yall_loaded".</p>
<p>The options available when you create an instance are:</p>
<pre>
let options = {
//elems to search
target : "classname", defaults to "yall_lazy"
//class to add after being loaded
classToLoad : "classname after intersect", defaults to "yall_loaded";
//intersectObserver threshold
threshold : [0,1], defaults to 0;
//root
root : element, defaults to null;
//rootMargin
rootMargin : intersectObserver rootMargin, defaults to "0px 0px 600px 0px";
//callback
callback : "function", defaults to null;
//activate to ignore the attribute loading="lazy" in supported browsers
useLoading : bool, defaults to false;
}
</pre>
<h2>Can X or Y be added</h2>
<p>Short answer: sure it can. Long answer: I just made this into a library because I only needed a quick working solution with a minimal of options, you can make a pull request or just ask, otherwise you have other options available for a more robust approach.</p>
</div>
</section>
<section class="examples" id="examples">
<!-- lazy loaded normal -->
<div class="item">
<div class="item-left"><img class="yall_lazy" data-src="assets/image1.jpg" alt=""></div>
<div class="item-right">
<div class="card">
<div class="image"><img class="yall_lazy" data-src="assets/image1.jpg" alt=""></div>
<div class="info">
<h3>Default behaviour</h3>
<p>Just and image lazy loaded</p>
</div>
</div>
</div>
</div>
<!-- effect on image -->
<div class="item">
<div class="item-left"><img class="yall_lazy slowloading" data-src="assets/image3.jpg" alt=""></div>
<div class="item-right">
<div class="card">
<div class="image"><img class="yall_lazy slowloading" data-src="assets/image3.jpg" alt=""></div>
<div class="info">
<h3>Class with opacity transition</h3>
<p>Just and image lazy loaded</p>
<p class="code">img.slowloading.yall_lazy {
opacity: 0;
transition: all 4s ease-in-out;
}
img.slowloading.yall_loaded {
opacity: 1;
}</p>
</div>
</div>
</div>
</div>
<!-- lazy applied to .card -->
<div class="item">
<div class="item-left yall_lazy"><img class="yall_lazy" data-src="assets/image4.jpg" alt=""></div>
<div class="item-right">
<div class="card yall_lazy">
<div class="image"><img class="yall_lazy" data-src="assets/image4.jpg" alt=""></div>
<div class="info">
<h3>Applied to an element (.card)</h3>
<p>Translating the element</p>
<p class="code">.card.yall_lazy {
transition: all 3s ease-in-out;
transform: translateX(-50vw);
opacity: 0;
}
.card.yall_loaded {
transform: translateX(0px);
opacity: 1;
}
}</p>
<p>rootMargin like rootMargin:"0px 0px -100px 500px"" to allow offscreen (left) elements</p>
</div>
</div>
</div>
</div>
<!-- check the log -->
<div class="item">
<div class="item-left"><img class="yall_lazy" data-src="assets/image5.jpg" alt=""></div>
<div class="item-right">
<div class="card">
<div class="image"><img class="yall_lazy" data-src="assets/image5.jpg" alt=""></div>
<div class="info">
<h3>Callback function</h3>
<p>Just check the console :)</p>
</div>
</div>
</div>
</div>
<!-- lazy loaded normal -->
<div class="item">
<div class="item-left"><img class="yall_lazy" data-src="assets/image2.jpg" alt=""></div>
<div class="item-right">
<div class="card">
<div class="image"><img class="yall_lazy" data-src="assets/image2.jpg" alt=""></div>
<div class="info">
<h3>Default behaviour</h3>
<p>Just and image lazy loaded</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>