smartImages.min.js

/**
 * SmartImages
 * ===========
 * SmartImages provides multiple functions:
 *
 * - Loading retina images when necessary and/or possible
 * - Making image sources responsive by swapping image sources on a predefined breakpoint.
 * - Adding lazy loading to images to only load when they come near the viewport.
 * - Added option to pre-define the future image sizes so the layout will be preserved for lazy images.
 * - Implemented functionality for background images of containers.
 * - Implemented functionality of custom query and source
 * - Implemented application on any DOM node (i.e. iframes)
 *
 * @url: https://github.com/Paratron/smartimages
 * @author: Christian Engel <hello@wearekiss.com>
 * @version: 2.5.1 (28.02.2017)
 */
(function(){function t(a){y=a.matches;var b;a=document.body.scrollTop;b=a+1.5*window.innerHeight;n(a,b);l(a,b)}function z(a){var b,c;b=document.body.scrollTop;c=b+1.5*window.innerHeight;"IMG"===a.nodeName?m(a,b,c,!1,!1):h(a,b,c,!1,!1)}function A(a,b,c,E){var e=a.getAttribute("data-src"),f=a.getAttribute("data-src-2x"),d=a.getAttribute("data-src-mobile"),m=a.getAttribute("data-src-mobile-2x"),g=a.getAttribute("data-size"),q=a.getAttribute("data-size-2x"),h=a.getAttribute("data-size-mobile"),k=a.getAttribute("data-size-mobile-2x"),
n=a.getAttribute("data-src-custom"),l=a.getAttribute("data-match-custom-id"),r=a.getAttribute("data-size-custom"),t=null!==a.getAttribute("data-lazy");g&&(g=g.split("x"));q&&(q=q.split("x"));h&&(h=h.split("x"));k&&(k=k.split("x"));y?(null!==d&&(e=d,g=h),u&&(null!==m?(e=m,g=k):null!==f&&(e=f,g=q))):u&&null!==f&&(e=f,g=q);n&&l&&p[l]&&p[l].matches&&(e=n,g=r);return t&&("IMG"===a.tagName.toUpperCase()?v=!0:w=!0,b+a.getBoundingClientRect().top>c)?g&&!a.getAttribute("data-dummy")?(a.setAttribute("data-dummy",
"1"),a=g,x.width=a[0],x.height=a[1],x.toDataURL()):null:E?e||"":null===e?null:e}function h(a,b,c,d,e){if(null===a.getAttribute("data-smart-ignore")||d)b=A(a,b,c,e),null!==b&&(a.style.backgroundImage="url("===b.substr(0,4)?b:"url("+b+")")}function m(a,b,c,d,e){if(null===a.getAttribute("data-smart-ignore")||d)b=A(a,b,c,e),null!==b&&a.src!==b&&(a.src=b)}function n(a,b){var c,d,e;e=document.querySelectorAll?Array.prototype.concat(Array.prototype.slice.call(document.images),Array.prototype.slice.call(document.querySelectorAll("[data-smartEntity]"))):
document.images;for(var f=0;f<e.length;f++)c=e[f],c.getAttribute("data-match-custom")&&!c.getAttribute("data-match-custom-id")&&(d=Math.random().toString().split(".")[1],c.setAttribute("data-match-custom-id",d),p[d]=window.matchMedia(c.getAttribute("data-match-custom")),p[d].addListener(function(a){return function(){z(a)}}(c))),m(c,a,b,!1,!1);v&&!k&&(k=!0,window.addEventListener("scroll",B))}function l(a,b){for(var c,d=document.querySelectorAll("[data-smartImageContainer]"),e=0;e<d.length;e++){c=
d[e];if(c.getAttribute("data-match-custom")&&!c.getAttribute("data-match-custom-id")){var f=Math.random().toString().split(".")[1];c.setAttribute("data-match-custom-id",f);p[f]=window.matchMedia(c.getAttribute("data-match-custom"));p[f].addListener(function(){z(c)})}h(c,a,b,!1,!1)}w&&!k&&(k=!0,window.addEventListener("scroll",B))}function B(){r||(r=!0,setTimeout(function(){r=!1;var a=document.body.scrollTop,b=a+1.5*window.innerHeight;v&&n(a,b);w&&l(a,b)},100))}var u,y,C=!1,d,r,D=!0,k=!1,v=!1,w=!1,
p={};u=window.matchMedia("(-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi)").matches;window.smartImages=d=window.smartImages||{};d.a=d.a||"(max-width: 650px)";var x=document.createElement("canvas");d.init=function(){var a,b;C||(C=!0,a=document.body.scrollTop,b=a+1.5*window.innerHeight,n(a,b),document.querySelectorAll&&l(a,b),a=window.matchMedia(d.a),t(a),a.addListener(t),console.log("Images are smart, now."))};d.noAutoInit=function(){D=!1};d.manualAssign=function(a){a instanceof Image||
"IMG"===a.nodeName?m(a,document.body.scrollTop,document.body.scrollTop+1.5*window.innerHeight,!0,!1):h(a,document.body.scrollTop,document.body.scrollTop+1.5*window.innerHeight,!0,!1)};d.getSrc=function(a){return m(a,0,0,!0,!0)};d.getBackground=function(a){return h(a,0,0,!0,!0)};window.addEventListener("load",function(){!0===D&&d.init()})})();