Skip to content

Commit 8cb90d3

Browse files
ApoorvSaxenaApoorvSaxena
authored
Merge pull request ApoorvSaxena#241 from igorkamyshev/color-placeholder
Color placeholder ✨
2 parents 4509b99 + a12994d commit 8cb90d3

File tree

8 files changed

+78
-23
lines changed

8 files changed

+78
-23
lines changed

‎README.md‎

Lines changed: 10 additions & 0 deletions
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 background:
208+
209+
```html
210+
<img class="lozad" data-placeholder-background="red" data-src="image.png" />
211+
```
212+
213+
Lozad sets a placeholder background color of img element and users will see the fallback till the image loads.
214+
205215
## Example with picture tag
206216

207217
Create _a broken_ picture element structure.

‎demo/assets/css/main.css‎

Lines changed: 1 addition & 0 deletions
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‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -58,62 +58,62 @@ <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-background="#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>
6565
<article class="thumb">
66-
<img class="lozad" data-src="images/thumbs/02.jpg" data-index="2" />
66+
<img class="lozad" data-placeholder-background="#b97248" data-src="images/thumbs/02.jpg" data-index="2" />
6767
<noscript><img src="images/thumbs/02.jpg" data-index="2" /></noscript>
6868
<h2>Image 2</h2>
6969
</article>
7070
<article class="thumb">
71-
<img class="lozad" data-src="images/thumbs/03.jpg" data-index="3" />
71+
<img class="lozad" data-placeholder-background="#352629" data-src="images/thumbs/03.jpg" data-index="3" />
7272
<noscript><img src="images/thumbs/03.jpg" data-index="3" /></noscript>
7373
<h2>Image 3</h2>
7474
</article>
7575
<article class="thumb">
76-
<img class="lozad" data-src="images/thumbs/04.jpg" data-index="4" />
76+
<img class="lozad" data-placeholder-background="#5e7b80" data-src="images/thumbs/04.jpg" data-index="4" />
7777
<noscript><img src="images/thumbs/04.jpg" data-index="4" /></noscript>
7878
<h2>Image 4</h2>
7979
</article>
8080
<article class="thumb">
81-
<img class="lozad" data-src="images/thumbs/05.jpg" data-index="5" />
81+
<img class="lozad" data-placeholder-background="#444443" data-src="images/thumbs/05.jpg" data-index="5" />
8282
<noscript><img src="images/thumbs/05.jpg" data-index="5" /></noscript>
8383
<h2>Image 5</h2>
8484
</article>
8585
<article class="thumb">
86-
<img class="lozad" data-src="images/thumbs/06.jpg" data-index="6" />
86+
<img class="lozad" data-placeholder-background="#a2a8ab" data-src="images/thumbs/06.jpg" data-index="6" />
8787
<noscript><img src="images/thumbs/06.jpg" data-index="6" /></noscript>
8888
<h2>Image 6</h2>
8989
</article>
9090
<article class="thumb">
91-
<img class="lozad" data-src="images/thumbs/07.jpg" data-index="7" />
91+
<img class="lozad" data-placeholder-background="#3e5e79" data-src="images/thumbs/07.jpg" data-index="7" />
9292
<noscript><img src="images/thumbs/07.jpg" data-index="7" /></noscript>
9393
<h2>Image 7</h2>
9494
</article>
9595
<article class="thumb">
96-
<img class="lozad" data-src="images/thumbs/08.jpg" data-index="8" />
96+
<img class="lozad" data-placeholder-background="#32141d" data-src="images/thumbs/08.jpg" data-index="8" />
9797
<noscript><img src="images/thumbs/08.jpg" data-index="8" /></noscript>
9898
<h2>Image 8</h2>
9999
</article>
100100
<article class="thumb">
101-
<img class="lozad" data-src="images/thumbs/09.jpg" data-index="9" />
101+
<img class="lozad" data-placeholder-background="#67848a" data-src="images/thumbs/09.jpg" data-index="9" />
102102
<noscript><img src="images/thumbs/09.jpg" data-index="9" /></noscript>
103103
<h2>Image 9</h2>
104104
</article>
105105
<article class="thumb">
106-
<img class="lozad" data-src="images/thumbs/10.jpg" data-index="10" />
106+
<img class="lozad" data-placeholder-background="#322721" data-src="images/thumbs/10.jpg" data-index="10" />
107107
<noscript><img src="images/thumbs/10.jpg" data-index="10" /></noscript>
108108
<h2>Image 10</h2>
109109
</article>
110110
<article class="thumb">
111-
<img class="lozad" data-src="images/thumbs/11.jpg" data-index="11" />
111+
<img class="lozad" data-placeholder-background="#c8c3c4" data-src="images/thumbs/11.jpg" data-index="11" />
112112
<noscript><img src="images/thumbs/11.jpg" data-index="11" /></noscript>
113113
<h2>Image 11</h2>
114114
</article>
115115
<article class="thumb">
116-
<img class="lozad" data-src="images/thumbs/12.jpg" data-index="12" />
116+
<img class="lozad" data-placeholder-background="#5a6840" data-src="images/thumbs/12.jpg" data-index="12" />
117117
<noscript><img src="images/thumbs/12.jpg" data-index="12" /></noscript>
118118
<h2>Image 12</h2>
119119
</article>

‎dist/lozad.es.js‎

Lines changed: 12 additions & 1 deletion
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-24
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-background')) {
88+
element.style.background = element.getAttribute('data-placeholder-background');
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‎

Lines changed: 18 additions & 7 deletions
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-24
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-background')) {
94+
element.style.background = element.getAttribute('data-placeholder-background');
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‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/lozad.js‎

Lines changed: 11 additions & 0 deletions
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-background')) {
83+
element.style.background = element.getAttribute('data-placeholder-background')
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)

‎test/index.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,17 @@ describe('lozad', () => {
206206
'background-image: url(photo.jpg);'
207207
)
208208
})
209+
// Handle image background placeholder
210+
it('should load the image with data-placeholder-background attribute', () => {
211+
const image = document.querySelectorAll('img')[0]
212+
const bgImageSetAttr = 'red'
213+
image.setAttribute('class', 'lozad')
214+
image.setAttribute('data-placeholder-background', bgImageSetAttr)
215+
const observer = lozad()
216+
observer.observe()
217+
assert.strictEqual('true', image.dataset.loaded)
218+
assert.strictEqual(image.style.cssText, 'background: red;')
219+
})
209220
})
210221

211222
describe('when passing options', () => {

0 commit comments

Comments
 (0)