Skip to content

Commit 2aca9ca

Browse files
igorkamyshevigorkamyshev
committed
add color placeholder feature ✨
1 parent 4509b99 commit 2aca9ca

File tree

7 files changed

+56
-12
lines changed

7 files changed

+56
-12
lines changed

‎README.md

+10
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,16 @@ const coolImage = document.querySelector('.image-to-load-first')
202202
observer.triggerLoad(coolImage);
203203
```
204204

205+
### Large image improvment
206+
207+
Sometimes image loading takes a long time. For this case, you can add a placeholder color:
208+
209+
```html
210+
<img class="lozad" data-placeholder-color="red" data-src="image.png" />
211+
```
212+
213+
Lozad set the background of `img` element and users will see the fallback.
214+
205215
## Example with picture tag
206216

207217
Create _a broken_ picture element structure.

‎demo/assets/css/main.css

+1
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ body {
4747

4848
img {
4949
width: 100%;
50+
height: 100%;
5051
}
5152

5253
/* Box Model */

‎demo/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ <h1><a href="https://github.com/ApoorvSaxena/lozad.js"><strong>Lozad.js</strong>
5858
<h1>Lozad.js - Performant Lazy Loading Library</h1>
5959
</article>
6060
<article class="thumb">
61-
<img class="lozad" data-src="images/thumbs/01.jpg" data-index="1" />
61+
<img class="lozad" data-placeholder-color="#583624" data-src="images/thumbs/01.jpg" data-index="1" />
6262
<noscript><img src="images/thumbs/01.jpg" data-index="1" /></noscript>
6363
<h2>Image 1</h2>
6464
</article>

‎dist/lozad.es.js

+12-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! lozad.js - v1.15.0 - 2020-05-23
1+
/*! lozad.js - v1.15.0 - 2020-07-02
22
* https://github.com/ApoorvSaxena/lozad.js
33
* Copyright (c) 2020 Apoorv Saxena; Licensed MIT */
44

@@ -83,6 +83,12 @@ function markAsLoaded(element) {
8383
element.setAttribute('data-loaded', true);
8484
}
8585

86+
function preLoad(element) {
87+
if (element.getAttribute('data-placeholder-color')) {
88+
element.style.backgroundColor = element.getAttribute('data-placeholder-color');
89+
}
90+
}
91+
8692
const isLoaded = element => element.getAttribute('data-loaded') === 'true';
8793

8894
const onIntersection = (load, loaded) => (entries, observer) => {
@@ -123,6 +129,11 @@ function lozad (selector = '.lozad', options = {}) {
123129
});
124130
}
125131

132+
const elements = getElements(selector, root);
133+
for (let i = 0; i < elements.length; i++) {
134+
preLoad(elements[i]);
135+
}
136+
126137
return {
127138
observe() {
128139
const elements = getElements(selector, root);

‎dist/lozad.js

+18-7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! lozad.js - v1.15.0 - 2020-05-23
1+
/*! lozad.js - v1.15.0 - 2020-07-02
22
* https://github.com/ApoorvSaxena/lozad.js
33
* Copyright (c) 2020 Apoorv Saxena; Licensed MIT */
44

@@ -89,6 +89,12 @@
8989
element.setAttribute('data-loaded', true);
9090
}
9191

92+
function preLoad(element) {
93+
if (element.getAttribute('data-placeholder-color')) {
94+
element.style.backgroundColor = element.getAttribute('data-placeholder-color');
95+
}
96+
}
97+
9298
var isLoaded = function isLoaded(element) {
9399
return element.getAttribute('data-loaded') === 'true';
94100
};
@@ -144,23 +150,28 @@
144150
});
145151
}
146152

153+
var elements = getElements(selector, root);
154+
for (var i = 0; i < elements.length; i++) {
155+
preLoad(elements[i]);
156+
}
157+
147158
return {
148159
observe: function observe() {
149160
var elements = getElements(selector, root);
150161

151-
for (var i = 0; i < elements.length; i++) {
152-
if (isLoaded(elements[i])) {
162+
for (var _i = 0; _i < elements.length; _i++) {
163+
if (isLoaded(elements[_i])) {
153164
continue;
154165
}
155166

156167
if (observer) {
157-
observer.observe(elements[i]);
168+
observer.observe(elements[_i]);
158169
continue;
159170
}
160171

161-
load(elements[i]);
162-
markAsLoaded(elements[i]);
163-
loaded(elements[i]);
172+
load(elements[_i]);
173+
markAsLoaded(elements[_i]);
174+
loaded(elements[_i]);
164175
}
165176
},
166177
triggerLoad: function triggerLoad(element) {

‎dist/lozad.min.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/lozad.js

+11
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,12 @@ function markAsLoaded(element) {
7878
element.setAttribute('data-loaded', true)
7979
}
8080

81+
function preLoad(element) {
82+
if (element.getAttribute('data-placeholder-color')) {
83+
element.style.backgroundColor = element.getAttribute('data-placeholder-color')
84+
}
85+
}
86+
8187
const isLoaded = element => element.getAttribute('data-loaded') === 'true'
8288

8389
const onIntersection = (load, loaded) => (entries, observer) => {
@@ -118,6 +124,11 @@ export default function (selector = '.lozad', options = {}) {
118124
})
119125
}
120126

127+
const elements = getElements(selector, root)
128+
for (let i = 0; i < elements.length; i++) {
129+
preLoad(elements[i])
130+
}
131+
121132
return {
122133
observe() {
123134
const elements = getElements(selector, root)

0 commit comments

Comments
 (0)