Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Merge pull request #241 from igorkamyshev/color-placeholder 
Color placeholder ✨
  • Loading branch information
@ApoorvSaxena
ApoorvSaxena committed Jul 25, 2020
2 parents 4509b99 + a12994d commit 8cb90d3
Show file tree
Hide file tree
Showing 8 changed files with 78 additions and 23 deletions.
10 changes: 10 additions & 0 deletions README.md
View file
Expand Up @@ -202,6 +202,16 @@ const coolImage = document.querySelector('.image-to-load-first')
observer.triggerLoad(coolImage);
```

### Large image improvment

Sometimes image loading takes a long time. For this case, you can add a placeholder background:

```html
<img class="lozad" data-placeholder-background="red" data-src="image.png" />
```

Lozad sets a placeholder background color of img element and users will see the fallback till the image loads.

## Example with picture tag

Create _a broken_ picture element structure.
Expand Down
1 change: 1 addition & 0 deletions demo/assets/css/main.css
View file
Expand Up @@ -47,6 +47,7 @@ body {

img {
width: 100%;
height: 100%;
}

/* Box Model */
Expand Down
24 changes: 12 additions & 12 deletions demo/index.html
View file
Expand Up @@ -58,62 +58,62 @@ <h1><a href="https://github.com/ApoorvSaxena/lozad.js"><strong>Lozad.js</strong>
<h1>Lozad.js - Performant Lazy Loading Library</h1>
</article>
<article class="thumb">
<img class="lozad" data-src="images/thumbs/01.jpg" data-index="1" />
<img class="lozad" data-placeholder-background="#583624" data-src="images/thumbs/01.jpg" data-index="1" />
<noscript><img src="images/thumbs/01.jpg" data-index="1" /></noscript>
<h2>Image 1</h2>
</article>
<article class="thumb">
<img class="lozad" data-src="images/thumbs/02.jpg" data-index="2" />
<img class="lozad" data-placeholder-background="#b97248" data-src="images/thumbs/02.jpg" data-index="2" />
<noscript><img src="images/thumbs/02.jpg" data-index="2" /></noscript>
<h2>Image 2</h2>
</article>
<article class="thumb">
<img class="lozad" data-src="images/thumbs/03.jpg" data-index="3" />
<img class="lozad" data-placeholder-background="#352629" data-src="images/thumbs/03.jpg" data-index="3" />
<noscript><img src="images/thumbs/03.jpg" data-index="3" /></noscript>
<h2>Image 3</h2>
</article>
<article class="thumb">
<img class="lozad" data-src="images/thumbs/04.jpg" data-index="4" />
<img class="lozad" data-placeholder-background="#5e7b80" data-src="images/thumbs/04.jpg" data-index="4" />
<noscript><img src="images/thumbs/04.jpg" data-index="4" /></noscript>
<h2>Image 4</h2>
</article>
<article class="thumb">
<img class="lozad" data-src="images/thumbs/05.jpg" data-index="5" />
<img class="lozad" data-placeholder-background="#444443" data-src="images/thumbs/05.jpg" data-index="5" />
<noscript><img src="images/thumbs/05.jpg" data-index="5" /></noscript>
<h2>Image 5</h2>
</article>
<article class="thumb">
<img class="lozad" data-src="images/thumbs/06.jpg" data-index="6" />
<img class="lozad" data-placeholder-background="#a2a8ab" data-src="images/thumbs/06.jpg" data-index="6" />
<noscript><img src="images/thumbs/06.jpg" data-index="6" /></noscript>
<h2>Image 6</h2>
</article>
<article class="thumb">
<img class="lozad" data-src="images/thumbs/07.jpg" data-index="7" />
<img class="lozad" data-placeholder-background="#3e5e79" data-src="images/thumbs/07.jpg" data-index="7" />
<noscript><img src="images/thumbs/07.jpg" data-index="7" /></noscript>
<h2>Image 7</h2>
</article>
<article class="thumb">
<img class="lozad" data-src="images/thumbs/08.jpg" data-index="8" />
<img class="lozad" data-placeholder-background="#32141d" data-src="images/thumbs/08.jpg" data-index="8" />
<noscript><img src="images/thumbs/08.jpg" data-index="8" /></noscript>
<h2>Image 8</h2>
</article>
<article class="thumb">
<img class="lozad" data-src="images/thumbs/09.jpg" data-index="9" />
<img class="lozad" data-placeholder-background="#67848a" data-src="images/thumbs/09.jpg" data-index="9" />
<noscript><img src="images/thumbs/09.jpg" data-index="9" /></noscript>
<h2>Image 9</h2>
</article>
<article class="thumb">
<img class="lozad" data-src="images/thumbs/10.jpg" data-index="10" />
<img class="lozad" data-placeholder-background="#322721" data-src="images/thumbs/10.jpg" data-index="10" />
<noscript><img src="images/thumbs/10.jpg" data-index="10" /></noscript>
<h2>Image 10</h2>
</article>
<article class="thumb">
<img class="lozad" data-src="images/thumbs/11.jpg" data-index="11" />
<img class="lozad" data-placeholder-background="#c8c3c4" data-src="images/thumbs/11.jpg" data-index="11" />
<noscript><img src="images/thumbs/11.jpg" data-index="11" /></noscript>
<h2>Image 11</h2>
</article>
<article class="thumb">
<img class="lozad" data-src="images/thumbs/12.jpg" data-index="12" />
<img class="lozad" data-placeholder-background="#5a6840" data-src="images/thumbs/12.jpg" data-index="12" />
<noscript><img src="images/thumbs/12.jpg" data-index="12" /></noscript>
<h2>Image 12</h2>
</article>
Expand Down
13 changes: 12 additions & 1 deletion dist/lozad.es.js
View file
@@ -1,4 +1,4 @@
/*! lozad.js - v1.15.0 - 2020-05-23
/*! lozad.js - v1.15.0 - 2020-07-24
* https://github.com/ApoorvSaxena/lozad.js
* Copyright (c) 2020 Apoorv Saxena; Licensed MIT */

Expand Down Expand Up @@ -83,6 +83,12 @@ function markAsLoaded(element) {
element.setAttribute('data-loaded', true);
}

function preLoad(element) {
if (element.getAttribute('data-placeholder-background')) {
element.style.background = element.getAttribute('data-placeholder-background');
}
}

const isLoaded = element => element.getAttribute('data-loaded') === 'true';

const onIntersection = (load, loaded) => (entries, observer) => {
Expand Down Expand Up @@ -123,6 +129,11 @@ function lozad (selector = '.lozad', options = {}) {
});
}

const elements = getElements(selector, root);
for (let i = 0; i < elements.length; i++) {
preLoad(elements[i]);
}

return {
observe() {
const elements = getElements(selector, root);
Expand Down
25 changes: 18 additions & 7 deletions dist/lozad.js
View file
@@ -1,4 +1,4 @@
/*! lozad.js - v1.15.0 - 2020-05-23
/*! lozad.js - v1.15.0 - 2020-07-24
* https://github.com/ApoorvSaxena/lozad.js
* Copyright (c) 2020 Apoorv Saxena; Licensed MIT */

Expand Down Expand Up @@ -89,6 +89,12 @@
element.setAttribute('data-loaded', true);
}

function preLoad(element) {
if (element.getAttribute('data-placeholder-background')) {
element.style.background = element.getAttribute('data-placeholder-background');
}
}

var isLoaded = function isLoaded(element) {
return element.getAttribute('data-loaded') === 'true';
};
Expand Down Expand Up @@ -144,23 +150,28 @@
});
}

var elements = getElements(selector, root);
for (var i = 0; i < elements.length; i++) {
preLoad(elements[i]);
}

return {
observe: function observe() {
var elements = getElements(selector, root);

for (var i = 0; i < elements.length; i++) {
if (isLoaded(elements[i])) {
for (var _i = 0; _i < elements.length; _i++) {
if (isLoaded(elements[_i])) {
continue;
}

if (observer) {
observer.observe(elements[i]);
observer.observe(elements[_i]);
continue;
}

load(elements[i]);
markAsLoaded(elements[i]);
loaded(elements[i]);
load(elements[_i]);
markAsLoaded(elements[_i]);
loaded(elements[_i]);
}
},
triggerLoad: function triggerLoad(element) {
Expand Down
6 changes: 3 additions & 3 deletions dist/lozad.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 11 additions & 0 deletions src/lozad.js
View file
Expand Up @@ -78,6 +78,12 @@ function markAsLoaded(element) {
element.setAttribute('data-loaded', true)
}

function preLoad(element) {
if (element.getAttribute('data-placeholder-background')) {
element.style.background = element.getAttribute('data-placeholder-background')
}
}

const isLoaded = element => element.getAttribute('data-loaded') === 'true'

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

const elements = getElements(selector, root)
for (let i = 0; i < elements.length; i++) {
preLoad(elements[i])
}

return {
observe() {
const elements = getElements(selector, root)
Expand Down
11 changes: 11 additions & 0 deletions test/index.js
View file
Expand Up @@ -206,6 +206,17 @@ describe('lozad', () => {
'background-image: url(photo.jpg);'
)
})
// Handle image background placeholder
it('should load the image with data-placeholder-background attribute', () => {
const image = document.querySelectorAll('img')[0]
const bgImageSetAttr = 'red'
image.setAttribute('class', 'lozad')
image.setAttribute('data-placeholder-background', bgImageSetAttr)
const observer = lozad()
observer.observe()
assert.strictEqual('true', image.dataset.loaded)
assert.strictEqual(image.style.cssText, 'background: red;')
})
})

describe('when passing options', () => {
Expand Down

0 comments on commit 8cb90d3

Please sign in to comment.