From 79ec94fb5cf0475e97652b2d4dfde64bb89ef00c Mon Sep 17 00:00:00 2001 From: Arden de Raaij Date: Sat, 16 Dec 2017 14:41:35 +0000 Subject: [PATCH 1/6] [fix] test for waiting for image --- test/index.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/test/index.js b/test/index.js index c74a001..c57da42 100644 --- a/test/index.js +++ b/test/index.js @@ -60,8 +60,13 @@ describe('lozad', () => { const observer = lozad() const image = document.getElementsByTagName('img')[0] observer.observe() - assert.equal('true', image.dataset.loaded) - assert.equal(image.getAttribute('src'), image.dataset.src) + const imgLoad = new Image() + imgLoad.onload = () => { + image.setAttribute('data-loaded', true) + assert.equal('true', image.dataset.loaded) + assert.equal(image.getAttribute('src'), image.dataset.src) + } + imgLoad.src = image.getAttribute('src') }) }) @@ -81,8 +86,12 @@ describe('lozad', () => { const image = document.getElementsByTagName('img')[0] image.setAttribute('class', className) observer.observe() - assert.equal('true', image.dataset.loaded) - assert.equal(image.getAttribute('src'), image.dataset.src) + const imgLoad = new Image() + imgLoad.onload = () => { + image.setAttribute('data-loaded', true) + assert.equal('true', image.dataset.loaded) + assert.equal(image.getAttribute('src'), image.dataset.src) + } }) }) From a064fecd3ec7c0aa92c8a48bc6786621f7102551 Mon Sep 17 00:00:00 2001 From: Arden de Raaij Date: Sat, 16 Dec 2017 14:42:10 +0000 Subject: [PATCH 2/6] [add] funtion to wait for images --- src/lozad.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/lozad.js b/src/lozad.js index 535f1a4..dba9ec6 100644 --- a/src/lozad.js +++ b/src/lozad.js @@ -15,7 +15,11 @@ const defaultConfig = { } function markAsLoaded(element) { - element.setAttribute('data-loaded', true) + const imgLoad = new Image() + imgLoad.onload = () => { + element.setAttribute('data-loaded', true) + } + imgLoad.src = element.getAttribute('src') } const isLoaded = element => element.getAttribute('data-loaded') === 'true' From 46f6755f50e74ef9a9949470af876ea5bb0b200a Mon Sep 17 00:00:00 2001 From: Arden de Raaij Date: Sat, 16 Dec 2017 14:42:25 +0000 Subject: [PATCH 3/6] [fix] a few tests for waitforimages --- test/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/index.js b/test/index.js index c57da42..24cd2b9 100644 --- a/test/index.js +++ b/test/index.js @@ -66,7 +66,7 @@ describe('lozad', () => { assert.equal('true', image.dataset.loaded) assert.equal(image.getAttribute('src'), image.dataset.src) } - imgLoad.src = image.getAttribute('src') + imgLoad.src = image.getAttribute('src') }) }) @@ -91,7 +91,7 @@ describe('lozad', () => { image.setAttribute('data-loaded', true) assert.equal('true', image.dataset.loaded) assert.equal(image.getAttribute('src'), image.dataset.src) - } + } }) }) From c1752ace5e82bd148dcaf6b9fef428b25735e754 Mon Sep 17 00:00:00 2001 From: Arden de Raaij Date: Sat, 16 Dec 2017 14:42:39 +0000 Subject: [PATCH 4/6] [update] dist versions --- dist/lozad.js | 8 ++++++-- dist/lozad.min.js | 4 ++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/dist/lozad.js b/dist/lozad.js index 83f9e3f..08e7cf3 100644 --- a/dist/lozad.js +++ b/dist/lozad.js @@ -1,4 +1,4 @@ -/*! lozad.js - v1.0.9 - 2017-10-26 +/*! lozad.js - v1.0.9 - 2017-12-16 * https://github.com/ApoorvSaxena/lozad.js * Copyright (c) 2017 Apoorv Saxena; Licensed MIT */ @@ -28,7 +28,11 @@ var defaultConfig = { }; function markAsLoaded(element) { - element.setAttribute('data-loaded', true); + var imgLoad = new Image(); + imgLoad.onload = function () { + element.setAttribute('data-loaded', true); + }; + imgLoad.src = element.getAttribute('src'); } var isLoaded = function isLoaded(element) { diff --git a/dist/lozad.min.js b/dist/lozad.min.js index 4b38e0d..9dbb608 100644 --- a/dist/lozad.min.js +++ b/dist/lozad.min.js @@ -1,4 +1,4 @@ -/*! lozad.js - v1.0.9 - 2017-10-26 +/*! lozad.js - v1.0.9 - 2017-12-16 * https://github.com/ApoorvSaxena/lozad.js * Copyright (c) 2017 Apoorv Saxena; Licensed MIT */ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.lozad=e()}(this,function(){"use strict";function t(t){t.setAttribute("data-loaded",!0)}var e=Object.assign||function(t){for(var e=1;e0&&(n.unobserve(r.target),o(r.target)||(e(r.target),t(r.target)))})}};return function(){var a=arguments.length>0&&void 0!==arguments[0]?arguments[0]:".lozad",i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},u=e({},r,i),d=u.rootMargin,c=u.threshold,s=u.load,g=void 0;return window.IntersectionObserver&&(g=new IntersectionObserver(n(s),{rootMargin:d,threshold:c})),{observe:function(){for(var e=document.querySelectorAll(a),r=0;r0&&(o.unobserve(r.target),n(r.target)||(e(r.target),t(r.target)))})}};return function(){var a=arguments.length>0&&void 0!==arguments[0]?arguments[0]:".lozad",i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},u=e({},r,i),d=u.rootMargin,c=u.threshold,s=u.load,g=void 0;return window.IntersectionObserver&&(g=new IntersectionObserver(o(s),{rootMargin:d,threshold:c})),{observe:function(){for(var e=document.querySelectorAll(a),r=0;r Date: Sat, 16 Dec 2017 19:20:51 +0000 Subject: [PATCH 5/6] [add] support for fully loading background images --- dist/lozad.js | 8 +++++++- dist/lozad.min.js | 2 +- src/lozad.js | 8 +++++++- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/dist/lozad.js b/dist/lozad.js index 08e7cf3..557848c 100644 --- a/dist/lozad.js +++ b/dist/lozad.js @@ -31,8 +31,14 @@ function markAsLoaded(element) { var imgLoad = new Image(); imgLoad.onload = function () { element.setAttribute('data-loaded', true); + console.log('loaded'); }; - imgLoad.src = element.getAttribute('src'); + if (element.getAttribute('data-src')) { + imgLoad.src = element.getAttribute('src'); + } + if (element.getAttribute('data-background-image')) { + imgLoad.src = element.getAttribute('data-background-image'); + } } var isLoaded = function isLoaded(element) { diff --git a/dist/lozad.min.js b/dist/lozad.min.js index 9dbb608..0532572 100644 --- a/dist/lozad.min.js +++ b/dist/lozad.min.js @@ -1,4 +1,4 @@ /*! lozad.js - v1.0.9 - 2017-12-16 * https://github.com/ApoorvSaxena/lozad.js * Copyright (c) 2017 Apoorv Saxena; Licensed MIT */ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.lozad=e()}(this,function(){"use strict";function t(t){var e=new Image;e.onload=function(){t.setAttribute("data-loaded",!0)},e.src=t.getAttribute("src")}var e=Object.assign||function(t){for(var e=1;e0&&(o.unobserve(r.target),n(r.target)||(e(r.target),t(r.target)))})}};return function(){var a=arguments.length>0&&void 0!==arguments[0]?arguments[0]:".lozad",i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},u=e({},r,i),d=u.rootMargin,c=u.threshold,s=u.load,g=void 0;return window.IntersectionObserver&&(g=new IntersectionObserver(o(s),{rootMargin:d,threshold:c})),{observe:function(){for(var e=document.querySelectorAll(a),r=0;r0&&(n.unobserve(r.target),o(r.target)||(e(r.target),t(r.target)))})}};return function(){var a=arguments.length>0&&void 0!==arguments[0]?arguments[0]:".lozad",i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},u=e({},r,i),d=u.rootMargin,c=u.threshold,g=u.load,s=void 0;return window.IntersectionObserver&&(s=new IntersectionObserver(n(g),{rootMargin:d,threshold:c})),{observe:function(){for(var e=document.querySelectorAll(a),r=0;r { element.setAttribute('data-loaded', true) + console.log('loaded') + } + if (element.getAttribute('data-src')) { + imgLoad.src = element.getAttribute('src') + } + if (element.getAttribute('data-background-image')) { + imgLoad.src = element.getAttribute('data-background-image') } - imgLoad.src = element.getAttribute('src') } const isLoaded = element => element.getAttribute('data-loaded') === 'true' From cc3f545ae0350abc0b1e293f28dbf373b7fd0561 Mon Sep 17 00:00:00 2001 From: Arden de Raaij Date: Sat, 16 Dec 2017 19:21:13 +0000 Subject: [PATCH 6/6] [remove] console.log --- dist/lozad.js | 1 - dist/lozad.min.js | 2 +- src/lozad.js | 1 - 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/dist/lozad.js b/dist/lozad.js index 557848c..0d6829a 100644 --- a/dist/lozad.js +++ b/dist/lozad.js @@ -31,7 +31,6 @@ function markAsLoaded(element) { var imgLoad = new Image(); imgLoad.onload = function () { element.setAttribute('data-loaded', true); - console.log('loaded'); }; if (element.getAttribute('data-src')) { imgLoad.src = element.getAttribute('src'); diff --git a/dist/lozad.min.js b/dist/lozad.min.js index 0532572..45ffc2b 100644 --- a/dist/lozad.min.js +++ b/dist/lozad.min.js @@ -1,4 +1,4 @@ /*! lozad.js - v1.0.9 - 2017-12-16 * https://github.com/ApoorvSaxena/lozad.js * Copyright (c) 2017 Apoorv Saxena; Licensed MIT */ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.lozad=e()}(this,function(){"use strict";function t(t){var e=new Image;e.onload=function(){t.setAttribute("data-loaded",!0),console.log("loaded")},t.getAttribute("data-src")&&(e.src=t.getAttribute("src")),t.getAttribute("data-background-image")&&(e.src=t.getAttribute("data-background-image"))}var e=Object.assign||function(t){for(var e=1;e0&&(n.unobserve(r.target),o(r.target)||(e(r.target),t(r.target)))})}};return function(){var a=arguments.length>0&&void 0!==arguments[0]?arguments[0]:".lozad",i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},u=e({},r,i),d=u.rootMargin,c=u.threshold,g=u.load,s=void 0;return window.IntersectionObserver&&(s=new IntersectionObserver(n(g),{rootMargin:d,threshold:c})),{observe:function(){for(var e=document.querySelectorAll(a),r=0;r0&&(o.unobserve(r.target),n(r.target)||(e(r.target),t(r.target)))})}};return function(){var a=arguments.length>0&&void 0!==arguments[0]?arguments[0]:".lozad",i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},u=e({},r,i),d=u.rootMargin,c=u.threshold,g=u.load,s=void 0;return window.IntersectionObserver&&(s=new IntersectionObserver(o(g),{rootMargin:d,threshold:c})),{observe:function(){for(var e=document.querySelectorAll(a),r=0;r { element.setAttribute('data-loaded', true) - console.log('loaded') } if (element.getAttribute('data-src')) { imgLoad.src = element.getAttribute('src')