diff --git a/README.md b/README.md index 6a1d2c6..6ee72b0 100644 --- a/README.md +++ b/README.md @@ -203,6 +203,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 + +``` + +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. diff --git a/demo/assets/css/main.css b/demo/assets/css/main.css index e07a762..3d1d082 100644 --- a/demo/assets/css/main.css +++ b/demo/assets/css/main.css @@ -47,6 +47,7 @@ body { img { width: 100%; + height: 100%; } /* Box Model */ diff --git a/demo/index.html b/demo/index.html index cdf4d61..c544b4e 100644 --- a/demo/index.html +++ b/demo/index.html @@ -58,62 +58,62 @@

Lozad.js

Lozad.js - Performant Lazy Loading Library

- +

Image 1

- +

Image 2

- +

Image 3

- +

Image 4

- +

Image 5

- +

Image 6

- +

Image 7

- +

Image 8

- +

Image 9

- +

Image 10

- +

Image 11

- +

Image 12

diff --git a/dist/lozad.es.js b/dist/lozad.es.js index f217689..7c2fe66 100644 --- a/dist/lozad.es.js +++ b/dist/lozad.es.js @@ -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) => { @@ -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); diff --git a/dist/lozad.js b/dist/lozad.js index a8bced1..6f2f47f 100644 --- a/dist/lozad.js +++ b/dist/lozad.js @@ -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'; }; @@ -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) { diff --git a/dist/lozad.min.js b/dist/lozad.min.js index a7accec..21d6664 100644 --- a/dist/lozad.min.js +++ b/dist/lozad.min.js @@ -6,5 +6,5 @@ * Detect IE browser * @const {boolean} * @private - */var u="undefined"!=typeof document&&document.documentMode,c={rootMargin:"0px",threshold:0,load:function(t){if("picture"===t.nodeName.toLowerCase()){var e=document.createElement("img");u&&t.getAttribute("data-iesrc")&&(e.src=t.getAttribute("data-iesrc")),t.getAttribute("data-alt")&&(e.alt=t.getAttribute("data-alt")),t.append(e)}if("video"===t.nodeName.toLowerCase()&&!t.getAttribute("data-src")&&t.children){for(var r=t.children,a=void 0,i=0;i<=r.length-1;i++)(a=r[i].getAttribute("data-src"))&&(r[i].src=a);t.load()}t.getAttribute("data-poster")&&(t.poster=t.getAttribute("data-poster")),t.getAttribute("data-src")&&(t.src=t.getAttribute("data-src")),t.getAttribute("data-srcset")&&t.setAttribute("srcset",t.getAttribute("data-srcset"));var o=",";if(t.getAttribute("data-background-delimiter")&&(o=t.getAttribute("data-background-delimiter")),t.getAttribute("data-background-image"))t.style.backgroundImage="url('"+t.getAttribute("data-background-image").split(o).join("'),url('")+"')";else if(t.getAttribute("data-background-image-set")){var n=t.getAttribute("data-background-image-set").split(o),d=n[0].substr(0,n[0].indexOf(" "))||n[0];// Substring before ... 1x -d=-1===d.indexOf("url(")?"url("+d+")":d,1===n.length?t.style.backgroundImage=d:t.setAttribute("style",(t.getAttribute("style")||"")+"background-image: "+d+"; background-image: -webkit-image-set("+n+"); background-image: image-set("+n+")")}t.getAttribute("data-toggle-class")&&t.classList.toggle(t.getAttribute("data-toggle-class"))},loaded:function(){}};function l(t){t.setAttribute("data-loaded",!0)}var b=function(t){return"true"===t.getAttribute("data-loaded")};return function(){var r,a,i=0 element.getAttribute('data-loaded') === 'true' const onIntersection = (load, loaded) => (entries, observer) => { @@ -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) diff --git a/test/index.js b/test/index.js index dd935f1..d8eab8a 100644 --- a/test/index.js +++ b/test/index.js @@ -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', () => {