diff --git a/dist/lazyload.es2015.js b/dist/lazyload.es2015.js index 0a4f9bf6..de8745ee 100644 --- a/dist/lazyload.es2015.js +++ b/dist/lazyload.es2015.js @@ -112,46 +112,50 @@ const setData = (element, attribute, value) => { return element.setAttribute(dataPrefix + attribute, value); }; -const setSourcesForPicture = function (element, srcsetDataAttribute) { - const parent = element.parentNode; - if (parent && parent.tagName !== "PICTURE") { - return; - } - for (let i = 0; i < parent.children.length; i++) { - let pictureChild = parent.children[i]; - if (pictureChild.tagName === "SOURCE") { - let sourceSrcset = getData(pictureChild, srcsetDataAttribute); - if (sourceSrcset) { - pictureChild.setAttribute("srcset", sourceSrcset); +const setSourcesInChildren = function(parentTag, attrName, dataAttrName) { + for (let i = 0, childTag; childTag = parentTag.children[i]; i += 1) { + if (childTag.tagName === "SOURCE") { + let attributeValue = getData(childTag, dataAttrName); + if (attributeValue) { + childTag.setAttribute(attrName, attributeValue); } } } }; -var setSources = function (element, srcsetDataAttribute, srcDataAttribute) { +const setAttributeIfNotNullOrEmpty = function(element, attrName, value) { + if (!value) {return;} + element.setAttribute(attrName, value); +}; + +function setSources(element, settings) { + const dataAttrSrcName = settings.data_src; + const elementSrc = getData(element, dataAttrSrcName); const tagName = element.tagName; - const elementSrc = getData(element, srcDataAttribute); if (tagName === "IMG") { - setSourcesForPicture(element, srcsetDataAttribute); - const imgSrcset = getData(element, srcsetDataAttribute); - if (imgSrcset) { - element.setAttribute("srcset", imgSrcset); - } - if (elementSrc) { - element.setAttribute("src", elementSrc); + const dataAttrSrcSetName = settings.data_srcset; + const elementSrcSet = getData(element, dataAttrSrcSetName); + const parent = element.parentNode; + if (parent && parent.tagName === "PICTURE") { + setSourcesInChildren(parent, "srcset", dataAttrSrcSetName); } + setAttributeIfNotNullOrEmpty(element, "srcset", elementSrcSet); + setAttributeIfNotNullOrEmpty(element, "src", elementSrc); return; } if (tagName === "IFRAME") { - if (elementSrc) { - element.setAttribute("src", elementSrc); - } + setAttributeIfNotNullOrEmpty(element, "src", elementSrc); + return; + } + if (tagName === "VIDEO") { + setSourcesInChildren(element, "src", dataAttrSrcName); + setAttributeIfNotNullOrEmpty(element, "src", elementSrc); return; } if (elementSrc) { element.style.backgroundImage = `url("${elementSrc}")`; } -}; +} const runningOnBrowser = (typeof window !== "undefined"); @@ -220,12 +224,12 @@ LazyLoad.prototype = { }; callCallback(settings.callback_enter, element); - if (element.tagName === "IMG" || element.tagName === "IFRAME") { + if (["IMG", "IFRAME", "VIDEO"].indexOf(element.tagName) > -1) { element.addEventListener("load", loadCallback); element.addEventListener("error", errorCallback); addClass(element, settings.class_loading); } - setSources(element, settings.data_srcset, settings.data_src); + setSources(element, settings); callCallback(settings.callback_set, element); }, diff --git a/dist/lazyload.js b/dist/lazyload.js index 23104907..08e40e3d 100644 --- a/dist/lazyload.js +++ b/dist/lazyload.js @@ -110,46 +110,52 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol return element.setAttribute(dataPrefix + attribute, value); }; - var setSourcesForPicture = function setSourcesForPicture(element, srcsetDataAttribute) { - var parent = element.parentNode; - if (parent && parent.tagName !== "PICTURE") { - return; - } - for (var i = 0; i < parent.children.length; i++) { - var pictureChild = parent.children[i]; - if (pictureChild.tagName === "SOURCE") { - var sourceSrcset = getData(pictureChild, srcsetDataAttribute); - if (sourceSrcset) { - pictureChild.setAttribute("srcset", sourceSrcset); + var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName) { + for (var i = 0, childTag; childTag = parentTag.children[i]; i += 1) { + if (childTag.tagName === "SOURCE") { + var attributeValue = getData(childTag, dataAttrName); + if (attributeValue) { + childTag.setAttribute(attrName, attributeValue); } } } }; - var setSources = function setSources(element, srcsetDataAttribute, srcDataAttribute) { + var setAttributeIfNotNullOrEmpty = function setAttributeIfNotNullOrEmpty(element, attrName, value) { + if (!value) { + return; + } + element.setAttribute(attrName, value); + }; + + function setSources(element, settings) { + var dataAttrSrcName = settings.data_src; + var elementSrc = getData(element, dataAttrSrcName); var tagName = element.tagName; - var elementSrc = getData(element, srcDataAttribute); if (tagName === "IMG") { - setSourcesForPicture(element, srcsetDataAttribute); - var imgSrcset = getData(element, srcsetDataAttribute); - if (imgSrcset) { - element.setAttribute("srcset", imgSrcset); - } - if (elementSrc) { - element.setAttribute("src", elementSrc); + var dataAttrSrcSetName = settings.data_srcset; + var elementSrcSet = getData(element, dataAttrSrcSetName); + var parent = element.parentNode; + if (parent && parent.tagName === "PICTURE") { + setSourcesInChildren(parent, "srcset", dataAttrSrcSetName); } + setAttributeIfNotNullOrEmpty(element, "srcset", elementSrcSet); + setAttributeIfNotNullOrEmpty(element, "src", elementSrc); return; } if (tagName === "IFRAME") { - if (elementSrc) { - element.setAttribute("src", elementSrc); - } + setAttributeIfNotNullOrEmpty(element, "src", elementSrc); + return; + } + if (tagName === "VIDEO") { + setSourcesInChildren(element, "src", dataAttrSrcName); + setAttributeIfNotNullOrEmpty(element, "src", elementSrc); return; } if (elementSrc) { element.style.backgroundImage = 'url("' + elementSrc + '")'; } - }; + } var runningOnBrowser = typeof window !== "undefined"; @@ -222,12 +228,12 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol }; callCallback(settings.callback_enter, element); - if (element.tagName === "IMG" || element.tagName === "IFRAME") { + if (["IMG", "IFRAME", "VIDEO"].indexOf(element.tagName) > -1) { element.addEventListener("load", loadCallback); element.addEventListener("error", errorCallback); addClass(element, settings.class_loading); } - setSources(element, settings.data_srcset, settings.data_src); + setSources(element, settings); callCallback(settings.callback_set, element); }, diff --git a/dist/lazyload.min.js b/dist/lazyload.min.js index d184f972..9e0560fd 100644 --- a/dist/lazyload.min.js +++ b/dist/lazyload.min.js @@ -1 +1 @@ -var _extends=Object.assign||function(e){for(var t=1;t=o(e)+n+e.offsetHeight},a=function(e,t,n){return(t===window?window.pageXOffset:s(t))>=s(e)+n+e.offsetWidth},c=function(e,t,n){return!(i(e,t,n)||l(e,t,n)||r(e,t,n)||a(e,t,n))},u=function(e,t){var n,o=new e(t);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:o}})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:o})}window.dispatchEvent(n)},d=function(e,t){return e.getAttribute("data-"+t)},h=function(e,t,n){return e.setAttribute("data-"+t,n)},f=function(e,t){var n=e.parentNode;if(!n||"PICTURE"===n.tagName)for(var o=0;o0;)e.splice(o.pop(),1)},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},handleScroll:function(){var e=this._settings.throttle;if(0!==e){var t=Date.now(),n=e-(t-this._previousLoopTime);n<=0||n>e?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=t,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),n))}else this._loopThroughElements()},update:function(){this._elements=Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null}};var b=window.lazyLoadOptions;return p&&b&&function(e,t){var n=t.length;if(n)for(var o=0;o=i(e)+n+e.offsetHeight},c=function(e,t,n){return(t===window?window.pageXOffset:r(t))>=r(e)+n+e.offsetWidth},u=function(e,t,n){return!(s(e,t,n)||a(e,t,n)||l(e,t,n)||c(e,t,n))},d=function(e,t){var n,o=new e(t);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:o}})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:o})}window.dispatchEvent(n)},h=function(e,t){return e.getAttribute("data-"+t)},f=function(e,t,n){return e.setAttribute("data-"+t,n)},_=function(e,t,n){for(var o,i=0;o=e.children[i];i+=1)if("SOURCE"===o.tagName){var s=h(o,n);s&&o.setAttribute(t,s)}},p=function(e,t,n){n&&e.setAttribute(t,n)},m="undefined"!=typeof window,g=m&&"classList"in document.createElement("p"),v=function(e,t){g?e.classList.add(t):e.className+=(e.className?" ":"")+t},w=function(e,t){g?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},b=function(e){this._settings=_extends({},t(),e),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._boundHandleScroll=this.handleScroll.bind(this),this._isFirstLoop=!0,window.addEventListener("resize",this._boundHandleScroll),this.update()};b.prototype={_reveal:function(t){var n=this._settings,i=function e(){n&&(t.removeEventListener("load",s),t.removeEventListener("error",e),w(t,n.class_loading),v(t,n.class_error),o(n.callback_error,t))},s=function e(){n&&(w(t,n.class_loading),v(t,n.class_loaded),t.removeEventListener("load",e),t.removeEventListener("error",i),o(n.callback_load,t))};o(n.callback_enter,t),["IMG","IFRAME","VIDEO"].indexOf(t.tagName)>-1&&(t.addEventListener("load",s),t.addEventListener("error",i),v(t,n.class_loading)),e(t,n),o(n.callback_set,t)},_loopThroughElements:function(){var e=this._settings,t=this._elements,i=t?t.length:0,s=void 0,r=[],l=this._isFirstLoop;for(s=0;s0;)e.splice(o.pop(),1)},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},handleScroll:function(){var e=this._settings.throttle;if(0!==e){var t=Date.now(),n=e-(t-this._previousLoopTime);n<=0||n>e?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=t,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),n))}else this._loopThroughElements()},update:function(){this._elements=Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null}};var y=window.lazyLoadOptions;return m&&y&&function(e,t){var n=t.length;if(n)for(var o=0;o -1) { element.addEventListener("load", loadCallback); element.addEventListener("error", errorCallback); addClass(element, settings.class_loading); } - setSources(element, settings.data_srcset, settings.data_src); + setSources(element, settings); callCallback(settings.callback_set, element); }, diff --git a/src/lazyload.setSources.js b/src/lazyload.setSources.js index f14367cd..93c3fe11 100644 --- a/src/lazyload.setSources.js +++ b/src/lazyload.setSources.js @@ -1,39 +1,43 @@ import {getData} from "./lazyload.data"; -const setSourcesForPicture = function (element, srcsetDataAttribute) { - const parent = element.parentNode; - if (parent && parent.tagName !== "PICTURE") { - return; - } - for (let i = 0; i < parent.children.length; i++) { - let pictureChild = parent.children[i]; - if (pictureChild.tagName === "SOURCE") { - let sourceSrcset = getData(pictureChild, srcsetDataAttribute); - if (sourceSrcset) { - pictureChild.setAttribute("srcset", sourceSrcset); +const setSourcesInChildren = function(parentTag, attrName, dataAttrName) { + for (let i = 0, childTag; childTag = parentTag.children[i]; i += 1) { + if (childTag.tagName === "SOURCE") { + let attributeValue = getData(childTag, dataAttrName); + if (attributeValue) { + childTag.setAttribute(attrName, attributeValue); } } } }; -export default function (element, srcsetDataAttribute, srcDataAttribute) { +const setAttributeIfNotNullOrEmpty = function(element, attrName, value) { + if (!value) {return;} + element.setAttribute(attrName, value); +}; + +export default function setSources(element, settings) { + const dataAttrSrcName = settings.data_src; + const elementSrc = getData(element, dataAttrSrcName); const tagName = element.tagName; - const elementSrc = getData(element, srcDataAttribute); if (tagName === "IMG") { - setSourcesForPicture(element, srcsetDataAttribute); - const imgSrcset = getData(element, srcsetDataAttribute); - if (imgSrcset) { - element.setAttribute("srcset", imgSrcset); - } - if (elementSrc) { - element.setAttribute("src", elementSrc); + const dataAttrSrcSetName = settings.data_srcset; + const elementSrcSet = getData(element, dataAttrSrcSetName); + const parent = element.parentNode; + if (parent && parent.tagName === "PICTURE") { + setSourcesInChildren(parent, "srcset", dataAttrSrcSetName); } + setAttributeIfNotNullOrEmpty(element, "srcset", elementSrcSet); + setAttributeIfNotNullOrEmpty(element, "src", elementSrc); return; } if (tagName === "IFRAME") { - if (elementSrc) { - element.setAttribute("src", elementSrc); - } + setAttributeIfNotNullOrEmpty(element, "src", elementSrc); + return; + } + if (tagName === "VIDEO") { + setSourcesInChildren(element, "src", dataAttrSrcName); + setAttributeIfNotNullOrEmpty(element, "src", elementSrc); return; } if (elementSrc) {