diff --git a/lazysizes/lazysizes.js b/lazysizes/lazysizes.js new file mode 100644 index 0000000..6c34c37 --- /dev/null +++ b/lazysizes/lazysizes.js @@ -0,0 +1,547 @@ +(function(window, factory) { + var lazySizes = factory(window, window.document); + window.lazySizes = lazySizes; + if(typeof module == 'object' && module.exports){ + module.exports = lazySizes; + } else if (typeof define == 'function' && define.amd) { + define(lazySizes); + } +}(window, function(window, document) { + 'use strict'; + /*jshint eqnull:true */ + if(!document.getElementsByClassName){return;} + + var lazySizesConfig; + + var docElem = document.documentElement; + + var addEventListener = window.addEventListener; + + var setTimeout = window.setTimeout; + + var rAF = window.requestAnimationFrame || setTimeout; + + var regPicture = /^picture$/i; + + var loadEvents = ['load', 'error', 'lazyincluded', '_lazyloaded']; + + var hasClass = function(ele, cls) { + var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); + return ele.className.match(reg) && reg; + }; + + var addClass = function(ele, cls) { + if (!hasClass(ele, cls)){ + ele.className += ' '+cls; + } + }; + + var removeClass = function(ele, cls) { + var reg; + if ((reg = hasClass(ele,cls))) { + ele.className = ele.className.replace(reg, ' '); + } + }; + + var addRemoveLoadEvents = function(dom, fn, add){ + var action = add ? 'addEventListener' : 'removeEventListener'; + if(add){ + addRemoveLoadEvents(dom, fn); + } + loadEvents.forEach(function(evt){ + dom[action](evt, fn); + }); + }; + + var triggerEvent = function(elem, name, detail, noBubbles, noCancelable){ + var event = document.createEvent('CustomEvent'); + + event.initCustomEvent(name, !noBubbles, !noCancelable, detail || {}); + + event.details = event.detail; + + elem.dispatchEvent(event); + return event; + }; + + var updatePolyfill = function (el, full){ + var polyfill; + if(!window.HTMLPictureElement){ + if( ( polyfill = (window.picturefill || window.respimage || lazySizesConfig.pf) ) ){ + polyfill({reevaluate: true, elements: [el]}); + } else if(full && full.src){ + el.src = full.src; + } + } + }; + + var getCSS = function (elem, style){ + return getComputedStyle(elem, null)[style]; + }; + + var getWidth = function(elem, parent, width){ + width = width || elem.offsetWidth; + + while(width < lazySizesConfig.minSize && parent && !elem._lazysizesWidth){ + width = parent.offsetWidth; + parent = parent.parentNode; + } + + return width; + }; + + var throttle = function(fn){ + var running; + var lastTime = 0; + var Date = window.Date; + var run = function(){ + running = false; + lastTime = Date.now(); + fn(); + }; + var afterAF = function(){ + //Todo: test setImmediate + setTimeout(run); + }; + var getAF = function(){ + rAF(afterAF); + }; + + return function(){ + if(running){ + return; + } + var delay = lazySizesConfig.throttle - (Date.now() - lastTime); + + running = true; + + if(delay < 9){ + delay = 9; + } + setTimeout(getAF, delay); + }; + }; + + var loader = (function(){ + var lazyloadElems, preloadElems, isCompleted, resetPreloadingTimer, loadMode; + + var eLvW, elvH, eLtop, eLleft, eLright, eLbottom; + + var defaultExpand, preloadExpand; + + var regImg = /^img$/i; + var regIframe = /^iframe$/i; + + var supportScroll = ('onscroll' in window) && !(/glebot/.test(navigator.userAgent)); + + var shrinkExpand = 0; + var currentExpand = 0; + + var isLoading = 0; + var lowRuns = 1; + + var resetPreloading = function(e){ + isLoading--; + if(e && e.target){ + addRemoveLoadEvents(e.target, resetPreloading); + } + + if(!e || isLoading < 0 || !e.target){ + isLoading = 0; + } + }; + + var isNestedVisible = function(elem, elemExpand){ + var outerRect; + var parent = elem; + var visible = getCSS(elem, 'visibility') != 'hidden'; + + eLtop -= elemExpand; + eLbottom += elemExpand; + eLleft -= elemExpand; + eLright += elemExpand; + + while(visible && (parent = parent.offsetParent)){ + visible = ((getCSS(parent, 'opacity') || 1) > 0); + + if(visible && getCSS(parent, 'overflow') != 'visible'){ + outerRect = parent.getBoundingClientRect(); + visible = eLright > outerRect.left && + eLleft < outerRect.right && + eLbottom > outerRect.top - 1 && + eLtop < outerRect.bottom + 1 + ; + } + } + + return visible; + }; + + var checkElements = function() { + var eLlen, i, rect, autoLoadElem, loadedSomething, elemExpand, elemNegativeExpand, elemExpandVal, beforeExpandVal; + + if((loadMode = lazySizesConfig.loadMode) && isLoading < 8 && (eLlen = lazyloadElems.length)){ + + i = 0; + + lowRuns++; + + if(currentExpand < preloadExpand && isLoading < 1 && lowRuns > 3 && loadMode > 2){ + currentExpand = preloadExpand; + lowRuns = 0; + } else if(currentExpand != defaultExpand && loadMode > 1 && lowRuns > 2 && isLoading < 6){ + currentExpand = defaultExpand; + } else { + currentExpand = shrinkExpand; + } + + for(; i < eLlen; i++){ + + if(!lazyloadElems[i] || lazyloadElems[i]._lazyRace){continue;} + + if(!supportScroll){unveilElement(lazyloadElems[i]);continue;} + + if(!(elemExpandVal = lazyloadElems[i].getAttribute('data-expand')) || !(elemExpand = elemExpandVal * 1)){ + elemExpand = currentExpand; + } + + if(beforeExpandVal !== elemExpand){ + eLvW = innerWidth + elemExpand; + elvH = innerHeight + elemExpand; + elemNegativeExpand = elemExpand * -1; + beforeExpandVal = elemExpand; + } + + rect = lazyloadElems[i].getBoundingClientRect(); + + if ((eLbottom = rect.bottom) >= elemNegativeExpand && + (eLtop = rect.top) <= elvH && + (eLright = rect.right) >= elemNegativeExpand && + (eLleft = rect.left) <= eLvW && + (eLbottom || eLright || eLleft || eLtop) && + ((isCompleted && isLoading < 3 && !elemExpandVal && (loadMode < 3 || lowRuns < 4)) || isNestedVisible(lazyloadElems[i], elemExpand))){ + unveilElement(lazyloadElems[i], rect.width); + loadedSomething = true; + } else if(!loadedSomething && isCompleted && !autoLoadElem && + isLoading < 3 && lowRuns < 4 && loadMode > 2 && + (preloadElems[0] || lazySizesConfig.preloadAfterLoad) && + (preloadElems[0] || (!elemExpandVal && ((eLbottom || eLright || eLleft || eLtop) || lazyloadElems[i].getAttribute(lazySizesConfig.sizesAttr) != 'auto')))){ + autoLoadElem = preloadElems[0] || lazyloadElems[i]; + } + } + + if(autoLoadElem && !loadedSomething){ + unveilElement(autoLoadElem); + } + } + }; + + var throttledCheckElements = throttle(checkElements); + + var switchLoadingClass = function(e){ + addClass(e.target, lazySizesConfig.loadedClass); + removeClass(e.target, lazySizesConfig.loadingClass); + addRemoveLoadEvents(e.target, switchLoadingClass); + }; + + var changeIframeSrc = function(elem, src){ + try { + elem.contentWindow.location.replace(src); + } catch(e){ + elem.setAttribute('src', src); + } + }; + + var rafBatch = (function(){ + var isRunning; + var batch = []; + var runBatch = function(){ + while(batch.length){ + (batch.shift())(); + } + isRunning = false; + }; + return function(fn){ + batch.push(fn); + if(!isRunning){ + isRunning = true; + rAF(runBatch); + } + }; + })(); + + var unveilElement = function (elem, width){ + var sources, i, len, sourceSrcset, src, srcset, parent, isPicture, event, firesLoad, customMedia; + + var isImg = regImg.test(elem.nodeName); + + //allow using sizes="auto", but don't use. it's invalid. Use data-sizes="auto" or a valid value for sizes instead (i.e.: sizes="80vw") + var sizes = elem.getAttribute(lazySizesConfig.sizesAttr) || elem.getAttribute('sizes'); + var isAuto = sizes == 'auto'; + + if( (isAuto || !isCompleted) && isImg && (elem.src || elem.srcset) && !elem.complete && !hasClass(elem, lazySizesConfig.errorClass)){return;} + + elem._lazyRace = true; + isLoading++; + + rafBatch(function lazyUnveil(){ + + if(elem._lazyRace){ + delete elem._lazyRace; + } + + removeClass(elem, lazySizesConfig.lazyClass); + + if(!(event = triggerEvent(elem, 'lazybeforeunveil')).defaultPrevented){ + + if(sizes){ + if(isAuto){ + autoSizer.updateElem(elem, true, width); + addClass(elem, lazySizesConfig.autosizesClass); + } else { + elem.setAttribute('sizes', sizes); + } + } + + srcset = elem.getAttribute(lazySizesConfig.srcsetAttr); + src = elem.getAttribute(lazySizesConfig.srcAttr); + + if(isImg) { + parent = elem.parentNode; + isPicture = parent && regPicture.test(parent.nodeName || ''); + } + + firesLoad = event.detail.firesLoad || (('src' in elem) && (srcset || src || isPicture)); + + event = {target: elem}; + + if(firesLoad){ + addRemoveLoadEvents(elem, resetPreloading, true); + clearTimeout(resetPreloadingTimer); + resetPreloadingTimer = setTimeout(resetPreloading, 2500); + + addClass(elem, lazySizesConfig.loadingClass); + addRemoveLoadEvents(elem, switchLoadingClass, true); + } + + if(isPicture){ + sources = parent.getElementsByTagName('source'); + for(i = 0, len = sources.length; i < len; i++){ + if( (customMedia = lazySizesConfig.customMedia[sources[i].getAttribute('data-media') || sources[i].getAttribute('media')]) ){ + sources[i].setAttribute('media', customMedia); + } + sourceSrcset = sources[i].getAttribute(lazySizesConfig.srcsetAttr); + if(sourceSrcset){ + sources[i].setAttribute('srcset', sourceSrcset); + } + } + } + + if(srcset){ + elem.setAttribute('srcset', srcset); + } else if(src){ + if(regIframe.test(elem.nodeName)){ + changeIframeSrc(elem, src); + } else { + elem.setAttribute('src', src); + } + } + + if(srcset || isPicture){ + updatePolyfill(elem, {src: src}); + } + } + + if( !firesLoad || elem.complete ){ + if(firesLoad){ + resetPreloading(event); + } else { + isLoading--; + } + switchLoadingClass(event); + } + }); + }; + + var onload = function(){ + var scrollTimer; + var afterScroll = function(){ + lazySizesConfig.loadMode = 3; + throttledCheckElements(); + }; + + isCompleted = true; + lowRuns += 8; + + lazySizesConfig.loadMode = 3; + + addEventListener('scroll', function(){ + if(lazySizesConfig.loadMode == 3){ + lazySizesConfig.loadMode = 2; + } + clearTimeout(scrollTimer); + scrollTimer = setTimeout(afterScroll, 99); + }, true); + }; + + return { + _: function(){ + + lazyloadElems = document.getElementsByClassName(lazySizesConfig.lazyClass); + preloadElems = document.getElementsByClassName(lazySizesConfig.lazyClass + ' ' + lazySizesConfig.preloadClass); + + defaultExpand = lazySizesConfig.expand; + preloadExpand = Math.round(defaultExpand * lazySizesConfig.expFactor); + + addEventListener('scroll', throttledCheckElements, true); + + addEventListener('resize', throttledCheckElements, true); + + if(window.MutationObserver){ + new MutationObserver( throttledCheckElements ).observe( docElem, {childList: true, subtree: true, attributes: true} ); + } else { + docElem.addEventListener('DOMNodeInserted', throttledCheckElements, true); + docElem.addEventListener('DOMAttrModified', throttledCheckElements, true); + setInterval(throttledCheckElements, 999); + } + + addEventListener('hashchange', throttledCheckElements, true); + + //, 'fullscreenchange' + ['focus', 'mouseover', 'click', 'load', 'transitionend', 'animationend', 'webkitAnimationEnd'].forEach(function(name){ + document.addEventListener(name, throttledCheckElements, true); + }); + + if(!(isCompleted = /d$|^c/.test(document.readyState))){ + addEventListener('load', onload); + document.addEventListener('DOMContentLoaded', throttledCheckElements); + } else { + onload(); + } + + throttledCheckElements(); + }, + checkElems: throttledCheckElements, + unveil: unveilElement + }; + })(); + + + var autoSizer = (function(){ + var autosizesElems; + + var sizeElement = function (elem, dataAttr, width){ + var sources, i, len, event; + var parent = elem.parentNode; + + if(parent){ + width = getWidth(elem, parent, width); + event = triggerEvent(elem, 'lazybeforesizes', {width: width, dataAttr: !!dataAttr}); + + if(!event.defaultPrevented){ + width = event.detail.width; + + if(width && width !== elem._lazysizesWidth){ + elem._lazysizesWidth = width; + width += 'px'; + elem.setAttribute('sizes', width); + + if(regPicture.test(parent.nodeName || '')){ + sources = parent.getElementsByTagName('source'); + for(i = 0, len = sources.length; i < len; i++){ + sources[i].setAttribute('sizes', width); + } + } + + if(!event.detail.dataAttr){ + updatePolyfill(elem, event.detail); + } + } + } + } + }; + + var updateElementsSizes = function(){ + var i; + var len = autosizesElems.length; + if(len){ + i = 0; + + for(; i < len; i++){ + sizeElement(autosizesElems[i]); + } + } + }; + + var throttledUpdateElementsSizes = throttle(updateElementsSizes); + + return { + _: function(){ + autosizesElems = document.getElementsByClassName(lazySizesConfig.autosizesClass); + addEventListener('resize', throttledUpdateElementsSizes); + }, + checkElems: throttledUpdateElementsSizes, + updateElem: sizeElement + }; + })(); + + var init = function(){ + if(!init.i){ + init.i = true; + autoSizer._(); + loader._(); + } + }; + + (function(){ + var prop; + var lazySizesDefaults = { + lazyClass: 'lazyload', + loadedClass: 'lazyloaded', + loadingClass: 'lazyloading', + preloadClass: 'lazypreload', + errorClass: 'lazyerror', + autosizesClass: 'lazyautosizes', + srcAttr: 'data-src', + srcsetAttr: 'data-srcset', + sizesAttr: 'data-sizes', + //preloadAfterLoad: false, + minSize: 40, + customMedia: {}, + init: true, + expFactor: 2, + expand: 359, + loadMode: 2, + throttle: 125 + }; + + lazySizesConfig = window.lazySizesConfig || window.lazysizesConfig || {}; + + for(prop in lazySizesDefaults){ + if(!(prop in lazySizesConfig)){ + lazySizesConfig[prop] = lazySizesDefaults[prop]; + } + } + + window.lazySizesConfig = lazySizesConfig; + + setTimeout(function(){ + if(lazySizesConfig.init){ + init(); + } + }); + })(); + + return { + cfg: lazySizesConfig, + autoSizer: autoSizer, + loader: loader, + init: init, + uP: updatePolyfill, + aC: addClass, + rC: removeClass, + hC: hasClass, + fire: triggerEvent, + gW: getWidth + }; +})); diff --git a/lazysizes/lazysizes.min.js b/lazysizes/lazysizes.min.js new file mode 100644 index 0000000..ff1926d --- /dev/null +++ b/lazysizes/lazysizes.min.js @@ -0,0 +1,2 @@ +/*! lazysizes - v1.1.3-RC1 - Licensed MIT */ +!function(a,b){var c=b(a,a.document);a.lazySizes=c,"object"==typeof module&&module.exports?module.exports=c:"function"==typeof define&&define.amd&&define(c)}(window,function(a,b){"use strict";if(b.getElementsByClassName){var c,d=b.documentElement,e=a.addEventListener,f=a.setTimeout,g=a.requestAnimationFrame||f,h=/^picture$/i,i=["load","error","lazyincluded","_lazyloaded"],j=function(a,b){var c=new RegExp("(\\s|^)"+b+"(\\s|$)");return a.className.match(c)&&c},k=function(a,b){j(a,b)||(a.className+=" "+b)},l=function(a,b){var c;(c=j(a,b))&&(a.className=a.className.replace(c," "))},m=function(a,b,c){var d=c?"addEventListener":"removeEventListener";c&&m(a,b),i.forEach(function(c){a[d](c,b)})},n=function(a,c,d,e,f){var g=b.createEvent("CustomEvent");return g.initCustomEvent(c,!e,!f,d||{}),g.details=g.detail,a.dispatchEvent(g),g},o=function(b,d){var e;a.HTMLPictureElement||((e=a.picturefill||a.respimage||c.pf)?e({reevaluate:!0,elements:[b]}):d&&d.src&&(b.src=d.src))},p=function(a,b){return getComputedStyle(a,null)[b]},q=function(a,b,d){for(d=d||a.offsetWidth;da&&(a=9),f(k,a)}}},s=function(){var i,q,s,u,v,w,x,y,z,A,B,C,D,E=/^img$/i,F=/^iframe$/i,G="onscroll"in a&&!/glebot/.test(navigator.userAgent),H=0,I=0,J=0,K=1,L=function(a){J--,a&&a.target&&m(a.target,L),(!a||0>J||!a.target)&&(J=0)},M=function(a,b){var c,d=a,e="hidden"!=p(a,"visibility");for(y-=b,B+=b,z-=b,A+=b;e&&(d=d.offsetParent);)e=(p(d,"opacity")||1)>0,e&&"visible"!=p(d,"overflow")&&(c=d.getBoundingClientRect(),e=A>c.left&&zc.top-1&&yJ&&(a=i.length)){for(b=0,K++,D>I&&1>J&&K>3&&v>2?(I=D,K=0):I=I!=C&&v>1&&K>2&&6>J?C:H;a>b;b++)i[b]&&!i[b]._lazyRace&&(G?((j=i[b].getAttribute("data-expand"))&&(g=1*j)||(g=I),k!==g&&(w=innerWidth+g,x=innerHeight+g,h=-1*g,k=g),d=i[b].getBoundingClientRect(),(B=d.bottom)>=h&&(y=d.top)<=x&&(A=d.right)>=h&&(z=d.left)<=w&&(B||A||z||y)&&(s&&3>J&&!j&&(3>v||4>K)||M(i[b],g))?(S(i[b],d.width),f=!0):!f&&s&&!e&&3>J&&4>K&&v>2&&(q[0]||c.preloadAfterLoad)&&(q[0]||!j&&(B||A||z||y||"auto"!=i[b].getAttribute(c.sizesAttr)))&&(e=q[0]||i[b])):S(i[b]));e&&!f&&S(e)}},O=r(N),P=function(a){k(a.target,c.loadedClass),l(a.target,c.loadingClass),m(a.target,P)},Q=function(a,b){try{a.contentWindow.location.replace(b)}catch(c){a.setAttribute("src",b)}},R=function(){var a,b=[],c=function(){for(;b.length;)b.shift()();a=!1};return function(d){b.push(d),a||(a=!0,g(c))}}(),S=function(a,b){var d,e,g,i,p,q,r,v,w,x,y,z=E.test(a.nodeName),A=a.getAttribute(c.sizesAttr)||a.getAttribute("sizes"),B="auto"==A;(!B&&s||!z||!a.src&&!a.srcset||a.complete||j(a,c.errorClass))&&(a._lazyRace=!0,J++,R(function(){if(a._lazyRace&&delete a._lazyRace,l(a,c.lazyClass),!(w=n(a,"lazybeforeunveil")).defaultPrevented){if(A&&(B?(t.updateElem(a,!0,b),k(a,c.autosizesClass)):a.setAttribute("sizes",A)),q=a.getAttribute(c.srcsetAttr),p=a.getAttribute(c.srcAttr),z&&(r=a.parentNode,v=r&&h.test(r.nodeName||"")),x=w.detail.firesLoad||"src"in a&&(q||p||v),w={target:a},x&&(m(a,L,!0),clearTimeout(u),u=f(L,2500),k(a,c.loadingClass),m(a,P,!0)),v)for(d=r.getElementsByTagName("source"),e=0,g=d.length;g>e;e++)(y=c.customMedia[d[e].getAttribute("data-media")||d[e].getAttribute("media")])&&d[e].setAttribute("media",y),i=d[e].getAttribute(c.srcsetAttr),i&&d[e].setAttribute("srcset",i);q?a.setAttribute("srcset",q):p&&(F.test(a.nodeName)?Q(a,p):a.setAttribute("src",p)),(q||v)&&o(a,{src:p})}(!x||a.complete)&&(x?L(w):J--,P(w))}))},T=function(){var a,b=function(){c.loadMode=3,O()};s=!0,K+=8,c.loadMode=3,e("scroll",function(){3==c.loadMode&&(c.loadMode=2),clearTimeout(a),a=f(b,99)},!0)};return{_:function(){i=b.getElementsByClassName(c.lazyClass),q=b.getElementsByClassName(c.lazyClass+" "+c.preloadClass),C=c.expand,D=Math.round(C*c.expFactor),e("scroll",O,!0),e("resize",O,!0),a.MutationObserver?new MutationObserver(O).observe(d,{childList:!0,subtree:!0,attributes:!0}):(d.addEventListener("DOMNodeInserted",O,!0),d.addEventListener("DOMAttrModified",O,!0),setInterval(O,999)),e("hashchange",O,!0),["focus","mouseover","click","load","transitionend","animationend","webkitAnimationEnd"].forEach(function(a){b.addEventListener(a,O,!0)}),(s=/d$|^c/.test(b.readyState))?T():(e("load",T),b.addEventListener("DOMContentLoaded",O)),O()},checkElems:O,unveil:S}}(),t=function(){var a,d=function(a,b,c){var d,e,f,g,i=a.parentNode;if(i&&(c=q(a,i,c),g=n(a,"lazybeforesizes",{width:c,dataAttr:!!b}),!g.defaultPrevented&&(c=g.detail.width,c&&c!==a._lazysizesWidth))){if(a._lazysizesWidth=c,c+="px",a.setAttribute("sizes",c),h.test(i.nodeName||""))for(d=i.getElementsByTagName("source"),e=0,f=d.length;f>e;e++)d[e].setAttribute("sizes",c);g.detail.dataAttr||o(a,g.detail)}},f=function(){var b,c=a.length;if(c)for(b=0;c>b;b++)d(a[b])},g=r(f);return{_:function(){a=b.getElementsByClassName(c.autosizesClass),e("resize",g)},checkElems:g,updateElem:d}}(),u=function(){u.i||(u.i=!0,t._(),s._())};return function(){var b,d={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:!0,expFactor:2,expand:359,loadMode:2,throttle:125};c=a.lazySizesConfig||a.lazysizesConfig||{};for(b in d)b in c||(c[b]=d[b]);a.lazySizesConfig=c,f(function(){c.init&&u()})}(),{cfg:c,autoSizer:t,loader:s,init:u,uP:o,aC:k,rC:l,hC:j,fire:n,gW:q}}}); \ No newline at end of file diff --git a/lazysizes/plugins/aspectratio/ls.aspectratio.css b/lazysizes/plugins/aspectratio/ls.aspectratio.css new file mode 100644 index 0000000..8435eed --- /dev/null +++ b/lazysizes/plugins/aspectratio/ls.aspectratio.css @@ -0,0 +1,3 @@ +picture img { + width: 100%; +} \ No newline at end of file diff --git a/lazysizes/plugins/aspectratio/ls.aspectratio.js b/lazysizes/plugins/aspectratio/ls.aspectratio.js new file mode 100644 index 0000000..9c754ce --- /dev/null +++ b/lazysizes/plugins/aspectratio/ls.aspectratio.js @@ -0,0 +1,204 @@ +(function(window, document){ + 'use strict'; + + if(!window.addEventListener){return;} + + var imageRatio, extend$, $; + + var regPicture = /^picture$/i; + var aspectRatioAttr = 'data-aspectratio'; + var aspectRatioSel = 'img[' + aspectRatioAttr + ']'; + + var matchesMedia = function(media){ + if(window.matchMedia){ + matchesMedia = function(media){ + return !media || (matchMedia(media) || {}).matches; + }; + } else if(window.Modernizr && Modernizr.mq){ + return !media || Modernizr.mq(media); + } else { + return !media; + } + return matchesMedia(media); + }; + + var addClass = function(elem, className){ + if($){ + $(elem).addClass(className); + } else if(window.lazySizes){ + lazySizes.aC(elem, className); + } else { + elem.classList.add(className); + } + }; + + var removeClass = function(elem, className){ + if($){ + $(elem).removeClass(className); + } else if(window.lazySizes){ + lazySizes.rC(elem, className); + } else { + elem.classList.remove(className); + } + }; + + function AspectRatio(){ + this.ratioElems = document.getElementsByClassName('lazyaspectratio'); + this._setupEvents(); + this.processImages(); + } + + AspectRatio.prototype = { + _setupEvents: function(){ + var module = this; + + var addRemoveAspectRatio = function(elem){ + if(elem.naturalWidth < 36){ + module.addAspectRatio(elem, true); + } else { + module.removeAspectRatio(elem, true); + } + }; + var onload = function(){ + module.processImages(); + }; + + document.addEventListener('load', function(e){ + if(e.target.getAttribute && e.target.getAttribute(aspectRatioAttr)){ + addRemoveAspectRatio(e.target); + } + }, true); + + addEventListener('resize', (function(){ + var timer; + var resize = function(){ + var i, len; + for(i = 0, len = module.ratioElems.length; i < len; i++){ + addRemoveAspectRatio(module.ratioElems[i]); + } + }; + + return function(){ + clearTimeout(timer); + timer = setTimeout(resize, 33); + }; + })()); + + document.addEventListener('DOMContentLoaded', onload); + + addEventListener('load', onload); + }, + processImages: function(context){ + var elements, i; + + if(!context){ + context = document; + } + + if('length' in context && !context.nodeName){ + elements = context; + } else { + elements = context.querySelectorAll(aspectRatioSel); + } + + for(i = 0; i < elements.length; i++){ + if(elements[i].naturalWidth > 36){ + this.removeAspectRatio(elements[i]); + continue; + } + this.addAspectRatio(elements[i]); + } + }, + getSelectedRatio: function(img){ + var i, len, sources, customMedia, ratio; + var parent = img.parentNode; + if(parent && regPicture.test(parent.nodeName || '')){ + sources = parent.getElementsByTagName('source'); + + for(i = 0, len = sources.length; i < len; i++){ + customMedia = sources[i].getAttribute('data-media') || sources[i].getAttribute('media'); + + if(window.lazySizesConfig && lazySizesConfig.customMedia[customMedia]){ + customMedia = lazySizesConfig.customMedia[customMedia]; + } + + if(matchesMedia(customMedia)){ + ratio = sources[i].getAttribute(aspectRatioAttr); + break; + } + } + } + + return ratio || img.getAttribute(aspectRatioAttr) || ''; + }, + parseRatio: (function(){ + var regRatio = /^\s*([+\d\.]+)(\s*[\/x]\s*([+\d\.]+))?\s*$/; + var ratioCache = {}; + return function(ratio){ + + if(!ratioCache[ratio] && ratio.match(regRatio)){ + if(RegExp.$3){ + ratioCache[ratio] = RegExp.$1 / RegExp.$3; + } else { + ratioCache[ratio] = RegExp.$1 * 1; + } + } + + return ratioCache[ratio]; + }; + })(), + addAspectRatio: function(img, notNew){ + var ratio; + var width = img.offsetWidth; + + if(!notNew){ + addClass(img, 'lazyaspectratio'); + } + + if(width < 36){ + if(width && window.console){ + console.log('Define width of image, so we can calculate the height'); + } + return; + } + + ratio = this.getSelectedRatio(img); + ratio = this.parseRatio(ratio); + + if(ratio){ + img.style.height = (width / ratio) + 'px'; + } + }, + removeAspectRatio: function(img){ + removeClass(img, 'lazyaspectratio'); + img.style.height = ''; + img.removeAttribute(aspectRatioAttr); + } + }; + + extend$ = function(){ + $ = window.jQuery || window.Zepto || window.shoestring || window.$; + if($ && $.fn && !$.fn.imageRatio && $.fn.filter && $.fn.add && $.fn.find){ + $.fn.imageRatio = function(){ + imageRatio.processImages(this.find(aspectRatioSel).add(this.filter(aspectRatioSel))); + return this; + }; + } else { + $ = false; + } + }; + + extend$(); + setTimeout(extend$); + + imageRatio = new AspectRatio(); + + window.imageRatio = imageRatio; + + if(typeof module == 'object' && module.exports){ + module.exports = imageRatio; + } else if (typeof define == 'function' && define.amd) { + define(imageRatio); + } + +})(window, document); diff --git a/lazysizes/plugins/aspectratio/ls.aspectratio.min.js b/lazysizes/plugins/aspectratio/ls.aspectratio.min.js new file mode 100644 index 0000000..1f619cf --- /dev/null +++ b/lazysizes/plugins/aspectratio/ls.aspectratio.min.js @@ -0,0 +1,2 @@ +/*! lazysizes - v1.1.3-RC1 - Licensed MIT */ +!function(a,b){"use strict";function c(){this.ratioElems=b.getElementsByClassName("lazyaspectratio"),this._setupEvents(),this.processImages()}if(a.addEventListener){var d,e,f,g=/^picture$/i,h="data-aspectratio",i="img["+h+"]",j=function(b){return a.matchMedia?(j=function(a){return!a||(matchMedia(a)||{}).matches})(b):a.Modernizr&&Modernizr.mq?!b||Modernizr.mq(b):!b},k=function(b,c){f?f(b).addClass(c):a.lazySizes?lazySizes.aC(b,c):b.classList.add(c)},l=function(b,c){f?f(b).removeClass(c):a.lazySizes?lazySizes.rC(b,c):b.classList.remove(c)};c.prototype={_setupEvents:function(){var a=this,c=function(b){b.naturalWidth<36?a.addAspectRatio(b,!0):a.removeAspectRatio(b,!0)},d=function(){a.processImages()};b.addEventListener("load",function(a){a.target.getAttribute&&a.target.getAttribute(h)&&c(a.target)},!0),addEventListener("resize",function(){var b,d=function(){var b,d;for(b=0,d=a.ratioElems.length;d>b;b++)c(a.ratioElems[b])};return function(){clearTimeout(b),b=setTimeout(d,33)}}()),b.addEventListener("DOMContentLoaded",d),addEventListener("load",d)},processImages:function(a){var c,d;a||(a=b),c="length"in a&&!a.nodeName?a:a.querySelectorAll(i);for(d=0;d36?this.removeAspectRatio(c[d]):this.addAspectRatio(c[d])},getSelectedRatio:function(b){var c,d,e,f,i,k=b.parentNode;if(k&&g.test(k.nodeName||""))for(e=k.getElementsByTagName("source"),c=0,d=e.length;d>c;c++)if(f=e[c].getAttribute("data-media")||e[c].getAttribute("media"),a.lazySizesConfig&&lazySizesConfig.customMedia[f]&&(f=lazySizesConfig.customMedia[f]),j(f)){i=e[c].getAttribute(h);break}return i||b.getAttribute(h)||""},parseRatio:function(){var a=/^\s*([+\d\.]+)(\s*[\/x]\s*([+\d\.]+))?\s*$/,b={};return function(c){return!b[c]&&c.match(a)&&(RegExp.$3?b[c]=RegExp.$1/RegExp.$3:b[c]=1*RegExp.$1),b[c]}}(),addAspectRatio:function(b,c){var d,e=b.offsetWidth;return c||k(b,"lazyaspectratio"),36>e?void(e&&a.console&&console.log("Define width of image, so we can calculate the height")):(d=this.getSelectedRatio(b),d=this.parseRatio(d),void(d&&(b.style.height=e/d+"px")))},removeAspectRatio:function(a){l(a,"lazyaspectratio"),a.style.height="",a.removeAttribute(h)}},e=function(){f=a.jQuery||a.Zepto||a.shoestring||a.$,f&&f.fn&&!f.fn.imageRatio&&f.fn.filter&&f.fn.add&&f.fn.find?f.fn.imageRatio=function(){return d.processImages(this.find(i).add(this.filter(i))),this}:f=!1},e(),setTimeout(e),d=new c,a.imageRatio=d,"object"==typeof module&&module.exports?module.exports=d:"function"==typeof define&&define.amd&&define(d)}}(window,document); \ No newline at end of file diff --git a/picture.admin.inc b/picture.admin.inc index 217bf64..278b7ce 100644 --- a/picture.admin.inc +++ b/picture.admin.inc @@ -223,9 +223,32 @@ function picture_admin_settings() { $form[$machine_name]['fallback'] = array( '#type' => 'select', '#title' => t('Fallback image style'), - '#options' => drupal_map_assoc(array_keys(image_styles())), + '#options' => drupal_map_assoc(array_keys(image_styles())) + array( + PICTURE_EMPTY_IMAGE => t('Empty image') + ), '#default_value' => isset($ckeditor_mappings[$machine_name]) ? $ckeditor_mappings[$machine_name]['fallback'] : NULL, ); + $form[$machine_name]['lazyload'] = array( + '#title' => t('Picture lazyload'), + '#description' => t('Image will be rendered when it appears in viewport, helps to optimize page load speed.'), + '#type' => 'checkbox', + '#default_value' => isset($ckeditor_mappings[$machine_name]) ? $ckeditor_mappings[$machine_name]['lazyload'] : 0, + ); + + $form[$machine_name]['lazyload_aspect_ratio'] = array( + '#title' => t('Keep aspect ratio'), + '#type' => 'checkbox', + '#description' => t('Preserve the space for the image being lazyloaded to avoid layout reflows.
Image ratio is defined per breakpoint, make sure all images from srcset have the same ratio.
Output example: !example', + array('!example' => htmlentities('')) + ), + '#default_value' => isset($ckeditor_mappings[$machine_name]) ? $ckeditor_mappings[$machine_name]['lazyload_aspect_ratio'] : 0, + '#states' => array( + 'visible' => array( + ':input[name="article_responsive_image[lazyload]"]' => array('checked' => TRUE), + ':input[name="article_responsive_image[fallback]"]' => array('value' => PICTURE_EMPTY_IMAGE), + ) + ) + ); } $form['#tree'] = TRUE; $form['ckeditor_label'] = array( @@ -322,6 +345,8 @@ function picture_admin_settings_submit($form, &$form_state) { $ckeditor_mappings[$machine_name]['enabled'] = $form_state['values'][$machine_name]['enabled']; $ckeditor_mappings[$machine_name]['weight'] = $form_state['values'][$machine_name]['weight']; $ckeditor_mappings[$machine_name]['fallback'] = $form_state['values'][$machine_name]['fallback']; + $ckeditor_mappings[$machine_name]['lazyload'] = $form_state['values'][$machine_name]['lazyload']; + $ckeditor_mappings[$machine_name]['lazyload_aspect_ratio'] = $form_state['values'][$machine_name]['lazyload_aspect_ratio']; } uasort($ckeditor_mappings, 'picture_compare_weights'); diff --git a/picture.file_entity_1.inc b/picture.file_entity_1.inc index 0e70c26..940c4a6 100644 --- a/picture.file_entity_1.inc +++ b/picture.file_entity_1.inc @@ -14,6 +14,8 @@ function picture_file_formatter_info() { 'default settings' => array( 'picture_group' => '', 'fallback_image_style' => '', + 'lazyload' => '', + 'lazyload_aspect_ratio' => '', 'alt' => '', 'title' => '', ), @@ -82,14 +84,26 @@ function picture_file_formatter_picture_view($file, $display, $langcode) { elseif (isset($file->metadata['height'])) { $dimensions['height'] = $file->metadata['height']; } + + $libraries = array( + array('picture', 'picturefill_head'), + array('picture', 'picturefill'), + array('picture', 'picture.ajax'), + ); + if (!empty($display['settings']['lazyload'])) { + $libraries[] = array('picture', 'lazysizes'); + + if (!empty($display['settings']['lazyload_aspect_ratio'])) { + $libraries[] = array('picture', 'lazysizes_aspect_ratio'); + }; + + }; + + $element = array( '#theme' => 'picture_formatter', '#attached' => array( - 'library' => array( - array('picture', 'matchmedia'), - array('picture', 'picturefill'), - array('picture', 'picture.ajax'), - ), + 'library' => $libraries ), '#item' => array( 'style_name' => $fallback_image_style, @@ -101,6 +115,8 @@ function picture_file_formatter_picture_view($file, $display, $langcode) { '#image_style' => $fallback_image_style, '#breakpoints' => $breakpoint_styles, '#path' => '', + '#lazyload' => !empty($display['settings']['lazyload']), + '#lazyload_aspect_ratio' => !empty($display['settings']['lazyload_aspect_ratio']), ); return $element; @@ -136,7 +152,31 @@ function picture_file_formatter_picture_settings($form, &$form_state, $settings) '#type' => 'select', '#default_value' => $settings['fallback_image_style'], '#empty_option' => t('Automatic'), - '#options' => $image_styles, + '#options' => $image_styles + array( + PICTURE_EMPTY_IMAGE => t('Empty image'), + ), + ); + + $element['lazyload'] = array( + '#title' => t('Picture lazyload'), + '#type' => 'checkbox', + '#description' => t('Image will be rendered when it appears in viewport, helps to optimize page load speed.'), + '#default_value' => !empty($settings['lazyload']), + ); + + $element['lazyload_aspect_ratio'] = array( + '#title' => t('Keep aspect ratio'), + '#type' => 'checkbox', + '#description' => t('Preserve the space for the image being lazyloaded to avoid layout reflows.
Image ratio is defined per breakpoint, make sure all images from srcset have the same ratio.
Output example: !example', + array('!example' => htmlentities('')) + ), + '#default_value' => !empty($settings['lazyload_aspect_ratio']), + '#states' => array( + 'visible' => array( + ':input[name="displays[file_picture][settings][lazyload]"]' => array('checked' => TRUE), + ':input[name="displays[file_picture][settings][fallback_image_style]"]' => array('value' => PICTURE_EMPTY_IMAGE), + ) + ) ); $element['alt'] = array( diff --git a/picture.module b/picture.module index dd27eec..e32cbd9 100644 --- a/picture.module +++ b/picture.module @@ -173,6 +173,41 @@ function picture_library() { ), ), ); + + $libraries['lazysizes'] = array( + 'title' => t('Lazyload for picture element'), + 'version' => '1.0.1', + 'js' => array( + drupal_get_path('module', 'picture') . '/lazysizes/lazysizes.min.js' => array( + 'type' => 'file', + // file has async, put before all files to prevent JS concatenation breaking + 'weight' => -20, + 'group' => JS_LIBRARY, + 'need_jquery' => FALSE, + 'async' => TRUE, + ), + ), + ); + + $libraries['lazysizes_aspect_ratio'] = array( + 'title' => t('Aspect ratio plugin for lazysizes'), + 'version' => '1.0.1', + 'js' => array( + drupal_get_path('module', 'picture') . '/lazysizes/plugins/aspectratio/ls.aspectratio.min.js' => array( + 'type' => 'file', + 'weight' => -10, + 'group' => JS_LIBRARY, + 'need_jquery' => FALSE, + 'async' => TRUE, + ), + ), + 'css' => array( + drupal_get_path('module', 'picture') . '/lazysizes/plugins/aspectratio/ls.aspectratio.css' => array( + 'type' => 'file', + 'media' => 'screen', + ), + ), + ); break; case 'dev': @@ -220,6 +255,42 @@ function picture_library() { ), ), ); + + $libraries['lazysizes'] = array( + 'title' => t('Lazyload for picture element'), + 'version' => '1.0.1', + 'js' => array( + drupal_get_path('module', 'picture') . '/lazysizes/lazysizes.js' => array( + 'type' => 'file', + // file has async, put before all files to prevent JS concatenation breaking + 'weight' => -20, + 'group' => JS_LIBRARY, + 'need_jquery' => FALSE, + 'async' => TRUE, + ), + ), + ); + + + $libraries['lazysizes_aspect_ratio'] = array( + 'title' => t('Aspect ratio plugin for lazysizes'), + 'version' => '1.0.1', + 'js' => array( + drupal_get_path('module', 'picture') . '/lazysizes/plugins/aspectratio/ls.aspectratio.js' => array( + 'type' => 'file', + 'weight' => -10, + 'group' => JS_LIBRARY, + 'need_jquery' => FALSE, + 'async' => TRUE, + ), + ), + 'css' => array( + drupal_get_path('module', 'picture') . '/lazysizes/plugins/aspectratio/ls.aspectratio.css' => array( + 'type' => 'file', + 'media' => 'screen', + ), + ), + ); break; } @@ -255,6 +326,8 @@ function picture_theme() { 'attributes' => array(), 'breakpoints' => array(), 'timestamp' => NULL, + 'lazyload' => NULL, + 'lazyload_aspect_ratio' => NULL, ), ), 'picture_formatter' => array( @@ -263,6 +336,8 @@ function picture_theme() { 'path' => NULL, 'image_style' => NULL, 'breakpoints' => array(), + 'lazyload' => NULL, + 'lazyload_aspect_ratio' => NULL, ), ), 'picture_formatter_colorbox' => array( @@ -283,6 +358,8 @@ function picture_theme() { 'media' => NULL, 'mime_type' => NULL, 'sizes' => NULL, + 'lazyload' => NULL, + 'lazyload_aspect_ratio' => NULL, ), ), 'image_srcset' => array( @@ -323,6 +400,8 @@ function picture_field_formatter_info() { 'settings' => array( 'picture_mapping' => reset($mappings), 'fallback_image_style' => '', + 'lazyload' => '', + 'lazyload_aspect_ratio' => '', 'image_link' => '', 'colorbox_settings' => array( 'colorbox_group' => '', @@ -342,6 +421,8 @@ function picture_field_formatter_info() { 'sizes' => '', 'image_styles' => array(), 'fallback_image_style' => '', + 'lazyload' => '', + 'lazyload_aspect_ratio' => '', 'image_link' => '', 'colorbox_settings' => array( 'colorbox_group' => '', @@ -407,6 +488,28 @@ function picture_field_formatter_settings_picture_form($field, $instance, $setti ), ); + $element['lazyload'] = array( + '#title' => t('Picture lazyload'), + '#description' => t('Image will be rendered when it appears in viewport, helps to optimize page load speed.'), + '#type' => 'checkbox', + '#default_value' => $settings['lazyload'] ? $settings['lazyload'] : FALSE , + ); + + $element['lazyload_aspect_ratio'] = array( + '#title' => t('Keep aspect ratio'), + '#type' => 'checkbox', + '#description' => t('Preserve the space for the image being lazyloaded to avoid layout reflows.
Image ratio is defined per breakpoint, make sure all images from srcset have the same ratio.
Output example: !example', + array('!example' => htmlentities('')) + ), + '#default_value' => !empty($settings['lazyload_aspect_ratio']), + '#states' => array( + 'visible' => array( + ':input[name="fields[field_image][settings_edit_form][settings][lazyload]"]' => array('checked' => TRUE), + ':input[name="fields[field_image][settings_edit_form][settings][fallback_image_style]"]' => array('value' => PICTURE_EMPTY_IMAGE), + ) + ) + ); + $link_types = picture_link_types($instance); $element['image_link'] = array( @@ -585,7 +688,10 @@ function picture_field_formatter_settings_picture_sizes_formatter_form($field, $ '#title' => t('Fallback image style'), '#type' => 'select', '#default_value' => $settings['fallback_image_style'], - '#options' => $image_styles, + '#options' => $image_styles + array( + PICTURE_EMPTY_IMAGE => t('Empty image'), + PICTURE_ORIGINAL_IMAGE => t('Original image'), + ), '#required' => TRUE, ); @@ -828,14 +934,24 @@ function picture_field_formatter_picture_view($entity_type, $entity, $field, $in unset($uri); } } + + $libraries = array( + array('picture', 'picturefill_head'), + array('picture', 'picturefill'), + array('picture', 'picture.ajax'), + ); + if (!empty($settings['lazyload'])) { + $libraries[] = array('picture', 'lazysizes'); + + if (!empty($display['settings']['lazyload_aspect_ratio'])) { + $libraries[] = array('picture', 'lazysizes_aspect_ratio'); + }; + + }; $element[$delta] = array( '#theme' => $formatter, '#attached' => array( - 'library' => array( - array('picture', 'picturefill_head'), - array('picture', 'picturefill'), - array('picture', 'picture.ajax'), - ), + 'library' => $libraries, ), '#item' => $item, '#image_style' => $fallback_image_style, @@ -843,6 +959,8 @@ function picture_field_formatter_picture_view($entity_type, $entity, $field, $in '#path' => isset($uri) ? $uri : '', '#colorbox_group' => $colorbox_breakpoints, '#colorbox_image_style' => $colorbox_fallback_image_style, + '#lazyload' => !empty($settings['lazyload']), + '#lazyload_aspect_ratio' => !empty($settings['lazyload_aspect_ratio']), ); // Add css and js for colorbox. @@ -1039,6 +1157,8 @@ function theme_picture_formatter($variables) { '#alt' => isset($item['alt']) ? $item['alt'] : '', '#attributes' => isset($item['attributes']) ? $item['attributes'] : NULL, '#timestamp' => $item['timestamp'], + '#lazyload' => !empty($variables['lazyload']), + '#lazyload_aspect_ratio' => !empty($variables['lazyload_aspect_ratio']), ); if (isset($item['title']) && drupal_strlen($item['title']) != 0) { $responsive_image['#title'] = $item['title']; @@ -1062,6 +1182,8 @@ function theme_picture_sizes_formatter($variables) { 'mapping_type' => 'sizes', 'sizes' => $variables['sizes'], 'sizes_image_styles' => $variables['image_styles'], + 'lazyload' => !empty($variables['lazyload']), + 'lazyload_aspect_ratio' => !empty($variables['lazyload_aspect_ratio']), ); return theme('picture_formatter', $variables); } @@ -1144,6 +1266,8 @@ function theme_picture_formatter_colorbox($variables) { * @ingroup themeable */ function theme_picture(array $variables) { + + $image_styles = image_styles(); // Make sure that width and height are proper values. // If they exists we'll output them. // @see http://www.w3.org/community/respimg/2012/06/18/florians-compromise/ @@ -1216,11 +1340,24 @@ function theme_picture(array $variables) { // Sort srcset. ksort($srcset); + $aspect_ratio = ''; + if (!empty($variables['lazyload_aspect_ratio']) && !empty($image_styles[$mapping_definition['image_style']])) { + $dimensions = array( + 'width' => $variables['width'], + 'height' => $variables['height'], + ); + $dimensions = picture_get_image_dimensions($mapping_definition['image_style'], $dimensions); + // store as a string, JS plugin will do calculation + $aspect_ratio = $dimensions['width'] . '/' . $dimensions['height']; + } + $sources[] = array( '#theme' => 'picture_source', '#srcset' => implode(', ', array_unique($srcset)), '#media' => $breakpoint->breakpoint, '#sizes' => implode(', ', array_unique($sizes)), + '#lazyload' => !empty($variables['lazyload']), + '#lazyload_aspect_ratio' => $aspect_ratio, ); } } @@ -1251,6 +1388,18 @@ function theme_picture(array $variables) { $output[] = ''; $src = _picture_image_style_url($variables['style_name'], $variables['uri'], $variables['timestamp']); + if (!empty($variables['lazyload'])) { + if (!is_array($attributes['class'])) { + $attributes['class'] = (array)$attributes['class']; + } + $attributes['class'][] = 'lazyload'; + } + + if (!empty($variables['lazyload_aspect_ratio'])) { + // img tag has to have data-aspectratio attribute even if its dummy placeholder + $attributes['data-aspectratio'] = ''; + } + if (variable_get('picture_fallback_method', 'src') === 'src') { $min_ie9_fallback = array( '#theme' => 'image_srcset', @@ -1395,9 +1544,16 @@ function theme_image_srcset(array $variables) { * @ingroup themeable */ function theme_picture_source(array $variables) { - $attributes = array( - 'srcset' => $variables['srcset'], - ); + + if (!empty($variables['lazyload'])) { + $attributes['data-srcset'] = $variables['srcset']; + if (!empty($variables['lazyload_aspect_ratio'])) { + $attributes['data-aspectratio'] = $variables['lazyload_aspect_ratio']; + } + } + else { + $attributes['srcset'] = $variables['srcset']; + } if (isset($variables['media']) && !empty($variables['media'])) { $attributes['media'] = $variables['media']; @@ -1551,6 +1707,8 @@ function _picture_filter_prepare_image($image) { 'data-picture-mapping' => $mapping_id, ) + $attributes, '#breakpoints' => $breakpoint_styles, + '#lazyload' => $picture_mappings[$mapping_id]['lazyload'], + '#lazyload_aspect_ratio' => $picture_mappings[$mapping_id]['lazyload_aspect_ratio'], ); return $image_render_array; } @@ -1588,6 +1746,14 @@ function picture_page_build(&$page) { if (array_key_exists($machine_name, $picture_mappings)) { if ($parameters['enabled'] == 1) { $mappings[] = array($picture_mappings[$machine_name], $machine_name); + if (!empty($ckeditor_mappings[$machine_name]['lazyload'])) { + drupal_add_library('picture', 'lazysizes'); + + if (!empty($ckeditor_mappings[$machine_name]['lazyload_aspect_ratio'])) { + drupal_add_library('picture', 'lazysizes_aspect_ratio'); + }; + + }; } } }