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/picture.file_entity_1.inc b/picture.file_entity_1.inc index 0e70c26..2bc2858 100644 --- a/picture.file_entity_1.inc +++ b/picture.file_entity_1.inc @@ -14,6 +14,7 @@ function picture_file_formatter_info() { 'default settings' => array( 'picture_group' => '', 'fallback_image_style' => '', + 'lazyload' => '', 'alt' => '', 'title' => '', ), @@ -28,12 +29,12 @@ function picture_file_formatter_info() { * View callback for hook_file_formatter_info(). */ function picture_file_formatter_picture_view($file, $display, $langcode) { + // Prevent PHP notices when trying to read empty files. // @see http://drupal.org/node/681042 if (!$file->filesize) { return; } - // Do not bother proceeding if this file does not have an image mime type. if (strpos($file->filemime, 'image/') !== 0) { return; @@ -82,14 +83,20 @@ 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'); + }; + $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 +108,7 @@ function picture_file_formatter_picture_view($file, $display, $langcode) { '#image_style' => $fallback_image_style, '#breakpoints' => $breakpoint_styles, '#path' => '', + '#lazyload' => $display['settings']['lazyload'] ); return $element; @@ -139,6 +147,13 @@ function picture_file_formatter_picture_settings($form, &$form_state, $settings) '#options' => $image_styles, ); + $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' => $settings['lazyload'] ? $settings['lazyload'] : FALSE , + ); + $element['alt'] = array( '#title' => t('Alt attribute'), '#description' => t('The text to use as value for the img tag alt attribute.'), diff --git a/picture.module b/picture.module index dd27eec..a5ecd37 100644 --- a/picture.module +++ b/picture.module @@ -173,6 +173,21 @@ 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, + ), + ), + ); break; case 'dev': @@ -220,6 +235,21 @@ 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, + ), + ), + ); break; } @@ -255,6 +285,7 @@ function picture_theme() { 'attributes' => array(), 'breakpoints' => array(), 'timestamp' => NULL, + 'lazyload' => NULL ), ), 'picture_formatter' => array( @@ -263,6 +294,7 @@ function picture_theme() { 'path' => NULL, 'image_style' => NULL, 'breakpoints' => array(), + 'lazyload' => NULL, ), ), 'picture_formatter_colorbox' => array( @@ -283,6 +315,7 @@ function picture_theme() { 'media' => NULL, 'mime_type' => NULL, 'sizes' => NULL, + 'lazyload' => NULL ), ), 'image_srcset' => array( @@ -323,6 +356,7 @@ function picture_field_formatter_info() { 'settings' => array( 'picture_mapping' => reset($mappings), 'fallback_image_style' => '', + 'lazyload' => '', 'image_link' => '', 'colorbox_settings' => array( 'colorbox_group' => '', @@ -342,6 +376,7 @@ function picture_field_formatter_info() { 'sizes' => '', 'image_styles' => array(), 'fallback_image_style' => '', + 'lazyload' => '', 'image_link' => '', 'colorbox_settings' => array( 'colorbox_group' => '', @@ -407,6 +442,13 @@ 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 , + ); + $link_types = picture_link_types($instance); $element['image_link'] = array( @@ -828,14 +870,19 @@ 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'); + }; $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 +890,7 @@ 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']), ); // Add css and js for colorbox. @@ -1039,6 +1087,7 @@ 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']), ); if (isset($item['title']) && drupal_strlen($item['title']) != 0) { $responsive_image['#title'] = $item['title']; @@ -1062,6 +1111,7 @@ function theme_picture_sizes_formatter($variables) { 'mapping_type' => 'sizes', 'sizes' => $variables['sizes'], 'sizes_image_styles' => $variables['image_styles'], + 'lazyload' => !empty($variables['lazyload']), ); return theme('picture_formatter', $variables); } @@ -1221,6 +1271,7 @@ function theme_picture(array $variables) { '#srcset' => implode(', ', array_unique($srcset)), '#media' => $breakpoint->breakpoint, '#sizes' => implode(', ', array_unique($sizes)), + '#lazyload' => !empty($variables['lazyload']), ); } } @@ -1251,6 +1302,9 @@ function theme_picture(array $variables) { $output[] = ''; $src = _picture_image_style_url($variables['style_name'], $variables['uri'], $variables['timestamp']); + if (!empty($variables['lazyload'])) { + $attributes['class'] = !empty($attributes['class']) ? $attributes['class'] . ' lazyload' : 'lazyload'; + } if (variable_get('picture_fallback_method', 'src') === 'src') { $min_ie9_fallback = array( '#theme' => 'image_srcset', @@ -1395,9 +1449,13 @@ 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']; + } + else { + $attributes['srcset'] = $variables['srcset']; + } if (isset($variables['media']) && !empty($variables['media'])) { $attributes['media'] = $variables['media'];