The srcset with the sizes attribute is definitely the way to go to create responsive, flexibel, adaptive images.
45 |
Unfortunately there is no way to tell the browser, that a specific image doesn't gain much perceived quality with a higher density or that image quality of a specific image isn't important for the user experience.
46 |
Due to the fact, that a 2x retina means 4x data and 3x retina means 9x data, performance can suffer even on good connections badly.
47 |
lazySizes data-optimumx feature (build on top of data-sizes="auto") gives the developer more control to use adaptive images markup, but opt-out from to high retina at some point by defining the optimum density.
48 |
49 |
50 |
Unfortunately this demo makes only sense, if you are using a retina device. Maybe come back with one (tablet / smartphone)? Sorry!
51 |
52 |
53 |
Configure the data-optimumx attribute
54 |
55 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
--------------------------------------------------------------------------------
/optimumx/js/parent.js:
--------------------------------------------------------------------------------
1 | (function(window, document){
2 |
3 | if ( window.HTMLPictureElement ) {
4 | $('html').addClass('resp-supported');
5 | }
6 |
7 | if ( (window.devicePixelRatio || 1) < 1.4 ) {
8 | $('html').addClass('no-retina');
9 | }
10 |
11 | webshim.setOptions('forms-ext', {
12 | replaceUI: 'auto'
13 | });
14 |
15 |
16 | webshim.polyfill('forms forms-ext');
17 |
18 |
19 | $(function(){
20 | var oninput;
21 |
22 | $('#vw-input')
23 | .on('change.smooth-vwchange', function(){
24 | oninput = $.prop(this, 'checked');
25 | })
26 | .trigger('change.smooth-vwchange')
27 | ;
28 | $('#viewport').each(function(){
29 | var onChange = function(e){
30 | if (!e || (oninput && e.type == 'input') || (e.type == 'change' && !oninput)){
31 | var val = $(this).val();
32 | $('#arena').width(val+'%');
33 | }
34 | };
35 | $(this).on('input change', onChange).each(onChange);
36 | });
37 | $('#arena').removeAttr('src').prop('src', 'javascript:false');
38 |
39 |
40 |
41 | $('.arena-config')
42 | .on('submit', function(){
43 | var data = $(this).serialize();
44 | $('#arena').prop('src', 'child.html?' + data);
45 | return false;
46 | })
47 | ;
48 |
49 | $('.btn-optimum').on('click', function(){
50 | $('#arena').prop('src', 'child.html?'+ (new Date().getTime()));
51 | return false;
52 | });
53 | $('.btn-auto').on('click', function(){
54 | $('#arena').prop('src', 'child.html?optimumx=auto');
55 | return false;
56 | });
57 | $('#arena').prop('src', 'child.html');
58 | })
59 |
60 | })(window, document);
61 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "lazysizes",
3 | "version": "5.3.2",
4 | "filename": "lazysizes.min.js",
5 | "license": "MIT",
6 | "author": "Alexander Farkas ",
7 | "scripts": {
8 | "build": "grunt && tsc && grunt importTs",
9 | "prepublishOnly": "npm run build"
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "git://github.com/aFarkas/lazysizes.git"
14 | },
15 | "namespace": "lazySizes",
16 | "main": "lazysizes.js",
17 | "browser": "lazysizes.js",
18 | "types": "lazysizes.d.ts",
19 | "devDependencies": {
20 | "grunt": "~1.1.0",
21 | "grunt-bytesize": "~0.2.0",
22 | "grunt-cli": "~1.3",
23 | "grunt-contrib-jshint": "^2.1.0",
24 | "grunt-contrib-qunit": "^3.1.0",
25 | "grunt-contrib-uglify": "^4.0.1",
26 | "grunt-contrib-watch": "~1.1.0",
27 | "grunt-max-filesize": "^0.1.1",
28 | "grunt-uncss": "~0.9.1",
29 | "jquery": "^3.5.1",
30 | "jquery-deparam": "^0.5.3",
31 | "picturefill": "^3.0.3",
32 | "qunitjs": "^2.4.1",
33 | "respimage": "^1.4.2",
34 | "typescript": "^4.1.5"
35 | },
36 | "npmName": "lazysizes",
37 | "npmFileMap": [
38 | {
39 | "basePath": "",
40 | "files": [
41 | "lazysizes.min.js",
42 | "plugins/**/*.min.js"
43 | ]
44 | }
45 | ],
46 | "description": "High performance (jankfree) lazy loader for images (including responsive images), iframes and scripts (widgets).",
47 | "keywords": [
48 | "lazy",
49 | "loader",
50 | "lazyloader",
51 | "lazyload",
52 | "lazySizes",
53 | "performance",
54 | "responsive",
55 | "image",
56 | "images",
57 | "responsive images",
58 | "picture",
59 | "srcset",
60 | "respimg",
61 | "respimage",
62 | "include",
63 | "ajax",
64 | "img",
65 | "imager",
66 | "imager.js",
67 | "picturefill",
68 | "component"
69 | ]
70 | }
71 |
--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # lazysizes plugins/extensions/snippets
2 |
3 | **lazysizes** works out of the box with standard and responsive images (``src``, ``srcset`` and ``picture``) and iframes.
4 |
5 | The scripts in this folder can be used as extensions or as boilerplate snippets to extend and adjust lazysizes to your needs.
6 |
--------------------------------------------------------------------------------
/plugins/artdirect/README.md:
--------------------------------------------------------------------------------
1 | # lazysizes artdirect extension
2 |
3 | The artdirect extension allows you to fully control art direction through your CSS. This is accomplished by two techniques which you can be used separately or combined. The extension hooks into the `data-sizes="auto"` feature.
4 |
5 | The first feature is by tagging and the second feature uses the information of the displayed aspect ratio of the `img` elements and the physical aspect ratio of your images.
6 |
7 | ## Enabling artdirect extension for a ``picture > img``
8 |
9 | You can either enable the artdirect extension for all images using JavaScript:
10 |
11 | ```js
12 | // never try to import *.min.js files
13 | import lazySizes from 'lazysizes';
14 | import 'lazysizes/plugins/artdiect/ls.artdirect';
15 |
16 | lazySizes.cfg.autoArtDirect = true;
17 | ```
18 |
19 | Or for a specific `img` element using CSS:
20 |
21 | ```css
22 | picture > img.is-autoartdirect {
23 | font-family: "artdirect";
24 | }
25 | ```
26 |
27 | ## Tagging `source` elements and controlling it via CSS
28 |
29 | You can use a whitespace separated list of tags on the `source` elements `data-tag` attribute as also a whitespace separated list of tags inside of the CSS `font-family`:
30 |
31 | ```html
32 |
43 |
44 |
45 |
48 |
51 |
57 |
58 | ```
59 |
60 | ## Providing aspect ratio information of physical images
61 |
62 | By providing the specific layout height and width (no `auto` values) through CSS and providing the physical aspect ratio of the images through either a `data-aspectratio` attribute or through `w` **and**`h` descriptors or through `width` and `height` content attributes the plugin can choose the best image source.
63 |
64 | ```html
65 |
77 |
78 |
79 |
83 |
87 |
93 |
94 | ```
95 |
96 | The aspect ratio feature can be perfectly combined with the tagging feature.
97 |
98 | ```html
99 |
113 |
114 |
115 |
120 |
124 |
129 |
135 |
136 | ```
137 |
138 |
139 |
--------------------------------------------------------------------------------
/plugins/artdirect/ls.artdirect.js:
--------------------------------------------------------------------------------
1 | (function(window, factory) {
2 | if (!window) {return;}
3 | var globalInstall = function(){
4 | factory(window.lazySizes);
5 | window.removeEventListener('lazyunveilread', globalInstall, true);
6 | };
7 |
8 | factory = factory.bind(null, window, window.document);
9 |
10 | if(typeof module == 'object' && module.exports){
11 | factory(require('lazysizes'));
12 | } else if (typeof define == 'function' && define.amd) {
13 | define(['lazysizes'], factory);
14 | } else if(window.lazySizes) {
15 | globalInstall();
16 | } else {
17 | window.addEventListener('lazyunveilread', globalInstall, true);
18 | }
19 | }(typeof window != 'undefined' ?
20 | window : 0, function(window, document, lazySizes) {
21 | 'use strict';
22 |
23 | if(!window.addEventListener){return;}
24 | var lazySizesConfig = lazySizes.cfg;
25 |
26 | var ElementPrototype = (window.Element || Node || window.HTMLElement).prototype;
27 | var regArtDirect = /artdirect/;
28 | var regDescriptors = /\s+(\d+)(w|h)\s+(\d+)(w|h)/;
29 | var regArtDirectTags = /artdirect["']*\s*:\s*["']*(.+?)(?=($|'|"|;))/;
30 | var regPicture = /^picture$/i;
31 | var regSplit = /[\s,]+/g;
32 | var slice = [].slice;
33 |
34 | function getCandidatesAspectRatio(element){
35 | var match, width, height;
36 | var ratio = parseFloat(element.getAttribute('data-aspectratio'));
37 | var srcset = element.getAttribute(lazySizesConfig.srcsetAttr) || element.getAttribute('srcset');
38 |
39 |
40 | if(!ratio){
41 | match = srcset.match(regDescriptors);
42 |
43 | if (match) {
44 | if(match[2] == 'w'){
45 | width = match[1];
46 | height = match[3];
47 | } else {
48 | width = match[3];
49 | height = match[1];
50 | }
51 | } else {
52 | width = element.getAttribute('width');
53 | height = element.getAttribute('height');
54 | }
55 |
56 | ratio = width / height;
57 | }
58 |
59 | return ratio;
60 | }
61 |
62 | function getLayoutAspectRatio(element){
63 | return element.offsetWidth / element.offsetHeight;
64 | }
65 |
66 | function toTagSelector(tag){
67 | return 'source[data-tag~="' + tag + '"]';
68 | }
69 |
70 | function getArtDirectConfig(img){
71 | var picture = img.parentNode;
72 | var isPicture = regPicture.test(picture.nodeName || '');
73 | var content = (window.getComputedStyle(img) || {}).fontFamily;
74 | var config = null;
75 |
76 | if(isPicture && (lazySizesConfig.autoArtDirect || regArtDirect.test(content || ''))){
77 | config = {
78 | picture: picture,
79 | img: img,
80 | tags: content.match(regArtDirectTags)
81 | };
82 |
83 | if(config.tags){
84 | config.selector = config.tags[1].split(regSplit).map(toTagSelector).join(',');
85 | }
86 | }
87 |
88 | return config;
89 | }
90 |
91 | function toSourceObj(source){
92 | var media = source.getAttribute('media');
93 |
94 | return {
95 | source: source,
96 | aspectRatio: getCandidatesAspectRatio(source),
97 | isSelected: !media || window.matchMedia(media).matches,
98 | };
99 | }
100 |
101 | function sortAspectRatio(source1, source2){
102 | return source1.aspectRatio < source2.aspectRatio;
103 | }
104 |
105 | function getClosestSource(sources, aspecRatio){
106 | var i, len;
107 | var closest = sources[0];
108 |
109 | for(i = 1, len = sources.length; i < len; i++){
110 | if(Math.abs(closest.aspectRatio - aspecRatio) > Math.abs(sources[i].aspectRatio - aspecRatio)){
111 | closest = sources[i];
112 | }
113 | }
114 |
115 | return closest;
116 | }
117 |
118 | function setMedia(source, media){
119 | source._lsMedia = media;
120 | lazySizes.rAF(function(){
121 | if(source._lsMedia){
122 | delete source._lsMedia;
123 | }
124 | source.setAttribute('media', media);
125 | });
126 | }
127 |
128 | function selectSource(imgCfg){
129 | var imgAspectRatio = getLayoutAspectRatio(imgCfg.img);
130 | var sources = slice.call(imgCfg.picture.getElementsByTagName('source'))
131 | .map(toSourceObj)
132 | .sort(sortAspectRatio)
133 | ;
134 | var matchedSources = imgCfg.selector ?
135 | sources.filter(function(source){
136 | return source.source.matches(imgCfg.selector);
137 | }) :
138 | sources
139 | ;
140 | var closestSource = getClosestSource(matchedSources, imgAspectRatio);
141 |
142 | if(!closestSource.isSelected){
143 | setMedia(closestSource.source, '(min-width: 1px)');
144 | }
145 |
146 | sources
147 | .filter(function(source){
148 | return (source != closestSource && source.isSelected);
149 | })
150 | .forEach(function (source) {
151 | setMedia(source.source, '(x)');
152 | })
153 | ;
154 | }
155 |
156 | function addAutoArtDirection(e){
157 |
158 | if(e.detail.instance != lazySizes){return;}
159 |
160 | var img = e.target;
161 | var imgCfg = getArtDirectConfig(img);
162 |
163 | if(imgCfg){
164 | selectSource(imgCfg);
165 | }
166 | }
167 |
168 | if(!ElementPrototype.matches){
169 | ElementPrototype.matches = ElementPrototype.matchesSelector ||
170 | ElementPrototype.webkitMatchesSelector ||
171 | ElementPrototype.msMatchesSelector ||
172 | ElementPrototype.oMatchesSelector;
173 | }
174 |
175 | window.addEventListener('lazybeforesizes', addAutoArtDirection, true);
176 | }));
177 |
--------------------------------------------------------------------------------
/plugins/artdirect/ls.artdirect.min.js:
--------------------------------------------------------------------------------
1 | /*! lazysizes - v5.3.2 */
2 |
3 | !function(e,t){var i;e&&(i=function(){t(e.lazySizes),e.removeEventListener("lazyunveilread",i,!0)},t=t.bind(null,e,e.document),"object"==typeof module&&module.exports?t(require("lazysizes")):"function"==typeof define&&define.amd?define(["lazysizes"],t):e.lazySizes?i():e.addEventListener("lazyunveilread",i,!0))}("undefined"!=typeof window?window:0,function(o,e,u){"use strict";var d,t,l,f,m,h,p,s;function g(e){return'source[data-tag~="'+e+'"]'}function n(e){var t,i,a,r,s,n,c=e.getAttribute("media");return{source:e,aspectRatio:(t=e,s=parseFloat(t.getAttribute("data-aspectratio")),n=t.getAttribute(d.srcsetAttr)||t.getAttribute("srcset"),s||(r=(i=n.match(f))?"w"==i[2]?(a=i[1],i[3]):(a=i[3],i[1]):(a=t.getAttribute("width"),t.getAttribute("height")),s=a/r),s),isSelected:!c||o.matchMedia(c).matches}}function c(e,t){return e.aspectRatioMath.abs(e[a].aspectRatio-t)&&(i=e[a]);return i}(t.selector?a.filter(function(e){return e.source.matches(t.selector)}):a,i);r.isSelected||y(r.source,"(min-width: 1px)"),a.filter(function(e){return e!=r&&e.isSelected}).forEach(function(e){y(e.source,"(x)")})}o.addEventListener&&(d=u.cfg,t=(o.Element||Node||o.HTMLElement).prototype,l=/artdirect/,f=/\s+(\d+)(w|h)\s+(\d+)(w|h)/,m=/artdirect["']*\s*:\s*["']*(.+?)(?=($|'|"|;))/,h=/^picture$/i,p=/[\s,]+/g,s=[].slice,t.matches||(t.matches=t.matchesSelector||t.webkitMatchesSelector||t.msMatchesSelector||t.oMatchesSelector),o.addEventListener("lazybeforesizes",function(e){var t,i,a,r,s,n,c;e.detail.instance==u&&(t=e.target,r=(a=t).parentNode,s=h.test(r.nodeName||""),n=(o.getComputedStyle(a)||{}).fontFamily,c=null,s&&(d.autoArtDirect||l.test(n||""))&&(c={picture:r,img:a,tags:n.match(m)}).tags&&(c.selector=c.tags[1].split(p).map(g).join(",")),(i=c)&&b(i))},!0))});
--------------------------------------------------------------------------------
/plugins/aspectratio/README.md:
--------------------------------------------------------------------------------
1 | # lazysizes aspectratio extension
2 |
3 | This plugin helps to pre-occupy the space needed for an image by calculating the height from the image width or the width from the height (This means the width or height has to be calculable before the image is loaded). This can serve as an alternative to the different CSS intrinsic ratio patterns.
4 |
5 | Note: The CSS patterns are recommended, but especially in case of different ratio's for art directed images not so convenient. This plugin removes the ``data-aspectratio`` attribute after processing each image and my not play well with other plugins that rely on this attribute.
6 |
7 | ## Markup API:
8 |
9 | The value of the ``data-aspectratio`` has to be defined as the *width* divided by the *height* of the image and can be represented as a ratio or a floating point number.
10 |
11 | Example values for an image with a width of 400 and a height of 200 (all mean the same): ``"400/200"``, ``"4/2"``, ``"2/1"``, ``"2"``, ``"2.0"``
12 |
13 | ```html
14 |
21 |
22 |
23 |
24 |
28 |
32 |
36 |
39 |
40 |
41 |
47 |
48 | ```
49 |
50 | ## JS API
51 |
52 | In case new elements are added to the DOM the global ``imageRatio.processImages`` method can be used. The method takes either an element representing the container/wrapper of the new elements or a list of image elements:
53 |
54 | ```js
55 | imageRatio.processImages(document.querySelector('#dynaimc-wrapper');
56 | imageRatio.processImages(document.querySelectorAll('#dynaimc-wrapper img[data-aspectratio]');
57 | ```
58 |
59 | In case jQuery, ZEPTO, shoestring or another jQuery-like library is used the ``imageRatio`` plugin is added also:
60 |
61 | ```js
62 | $('.dynamic-wrapper').imageRatio();
63 | $('.dynamic-wrapper img[data-aspectratio]').imageRatio();
64 | ```
65 |
66 | Note: This plugin can also be used without lazySizes core script.
67 |
--------------------------------------------------------------------------------
/plugins/aspectratio/ls.aspectratio.js:
--------------------------------------------------------------------------------
1 | (function(window, factory) {
2 | var globalInstall = function(){
3 | factory(window.lazySizes);
4 | window.removeEventListener('lazyunveilread', globalInstall, true);
5 | };
6 |
7 | factory = factory.bind(null, window, window.document);
8 |
9 | if(typeof module == 'object' && module.exports){
10 | factory(require('lazysizes'));
11 | } else if (typeof define == 'function' && define.amd) {
12 | define(['lazysizes'], factory);
13 | } else if(window.lazySizes) {
14 | globalInstall();
15 | } else {
16 | window.addEventListener('lazyunveilread', globalInstall, true);
17 | }
18 | }(window, function(window, document, lazySizes) {
19 | 'use strict';
20 |
21 | if(!window.addEventListener){return;}
22 |
23 | var forEach = Array.prototype.forEach;
24 |
25 | var imageRatio, extend$, $;
26 |
27 | var regPicture = /^picture$/i;
28 | var aspectRatioAttr = 'data-aspectratio';
29 | var aspectRatioSel = 'img[' + aspectRatioAttr + ']';
30 |
31 | var matchesMedia = function(media){
32 | if(window.matchMedia){
33 | matchesMedia = function(media){
34 | return !media || (matchMedia(media) || {}).matches;
35 | };
36 | } else if(window.Modernizr && Modernizr.mq){
37 | return !media || Modernizr.mq(media);
38 | } else {
39 | return !media;
40 | }
41 | return matchesMedia(media);
42 | };
43 |
44 | var addClass = lazySizes.aC;
45 | var removeClass = lazySizes.rC;
46 | var lazySizesConfig = lazySizes.cfg;
47 |
48 | function AspectRatio(){
49 | this.ratioElems = document.getElementsByClassName('lazyaspectratio');
50 | this._setupEvents();
51 | this.processImages();
52 | }
53 |
54 | AspectRatio.prototype = {
55 | _setupEvents: function(){
56 | var module = this;
57 |
58 | var addRemoveAspectRatio = function(elem){
59 | if(elem.naturalWidth < 36){
60 | module.addAspectRatio(elem, true);
61 | } else {
62 | module.removeAspectRatio(elem, true);
63 | }
64 | };
65 | var onload = function(){
66 | module.processImages();
67 | };
68 |
69 | document.addEventListener('load', function(e){
70 | if(e.target.getAttribute && e.target.getAttribute(aspectRatioAttr)){
71 | addRemoveAspectRatio(e.target);
72 | }
73 | }, true);
74 |
75 | addEventListener('resize', (function(){
76 | var timer;
77 | var resize = function(){
78 | forEach.call(module.ratioElems, addRemoveAspectRatio);
79 | };
80 |
81 | return function(){
82 | clearTimeout(timer);
83 | timer = setTimeout(resize, 99);
84 | };
85 | })());
86 |
87 | document.addEventListener('DOMContentLoaded', onload);
88 |
89 | addEventListener('load', onload);
90 | },
91 | processImages: function(context){
92 | var elements, i;
93 |
94 | if(!context){
95 | context = document;
96 | }
97 |
98 | if('length' in context && !context.nodeName){
99 | elements = context;
100 | } else {
101 | elements = context.querySelectorAll(aspectRatioSel);
102 | }
103 |
104 | for(i = 0; i < elements.length; i++){
105 | if(elements[i].naturalWidth > 36){
106 | this.removeAspectRatio(elements[i]);
107 | continue;
108 | }
109 | this.addAspectRatio(elements[i]);
110 | }
111 | },
112 | getSelectedRatio: function(img){
113 | var i, len, sources, customMedia, ratio;
114 | var parent = img.parentNode;
115 | if(parent && regPicture.test(parent.nodeName || '')){
116 | sources = parent.getElementsByTagName('source');
117 |
118 | for(i = 0, len = sources.length; i < len; i++){
119 | customMedia = sources[i].getAttribute('data-media') || sources[i].getAttribute('media');
120 |
121 | if(lazySizesConfig.customMedia[customMedia]){
122 | customMedia = lazySizesConfig.customMedia[customMedia];
123 | }
124 |
125 | if(matchesMedia(customMedia)){
126 | ratio = sources[i].getAttribute(aspectRatioAttr);
127 | break;
128 | }
129 | }
130 | }
131 |
132 | return ratio || img.getAttribute(aspectRatioAttr) || '';
133 | },
134 | parseRatio: (function(){
135 | var regRatio = /^\s*([+\d\.]+)(\s*[\/x]\s*([+\d\.]+))?\s*$/;
136 | var ratioCache = {};
137 | return function(ratio){
138 | var match;
139 |
140 | if(!ratioCache[ratio] && (match = ratio.match(regRatio))){
141 | if(match[3]){
142 | ratioCache[ratio] = match[1] / match[3];
143 | } else {
144 | ratioCache[ratio] = match[1] * 1;
145 | }
146 | }
147 |
148 | return ratioCache[ratio];
149 | };
150 | })(),
151 | addAspectRatio: function(img, notNew){
152 | var ratio;
153 | var width = img.offsetWidth;
154 | var height = img.offsetHeight;
155 |
156 | if(!notNew){
157 | addClass(img, 'lazyaspectratio');
158 | }
159 |
160 | if(width < 36 && height <= 0){
161 | if(width || height && window.console){
162 | console.log('Define width or height of image, so we can calculate the other dimension');
163 | }
164 | return;
165 | }
166 |
167 | ratio = this.getSelectedRatio(img);
168 | ratio = this.parseRatio(ratio);
169 |
170 | if(ratio){
171 | if(width){
172 | img.style.height = (width / ratio) + 'px';
173 | } else {
174 | img.style.width = (height * ratio) + 'px';
175 | }
176 | }
177 | },
178 | removeAspectRatio: function(img){
179 | removeClass(img, 'lazyaspectratio');
180 | img.style.height = '';
181 | img.style.width = '';
182 | img.removeAttribute(aspectRatioAttr);
183 | }
184 | };
185 |
186 | extend$ = function(){
187 | $ = window.jQuery || window.Zepto || window.shoestring || window.$;
188 | if($ && $.fn && !$.fn.imageRatio && $.fn.filter && $.fn.add && $.fn.find){
189 | $.fn.imageRatio = function(){
190 | imageRatio.processImages(this.find(aspectRatioSel).add(this.filter(aspectRatioSel)));
191 | return this;
192 | };
193 | } else {
194 | $ = false;
195 | }
196 | };
197 |
198 | extend$();
199 | setTimeout(extend$);
200 |
201 | imageRatio = new AspectRatio();
202 |
203 | window.imageRatio = imageRatio;
204 |
205 | if(typeof module == 'object' && module.exports){
206 | module.exports = imageRatio;
207 | } else if (typeof define == 'function' && define.amd) {
208 | define(imageRatio);
209 | }
210 |
211 | }));
212 |
--------------------------------------------------------------------------------
/plugins/aspectratio/ls.aspectratio.min.js:
--------------------------------------------------------------------------------
1 | /*! lazysizes - v5.3.2 */
2 |
3 | !function(e,t){var i=function(){t(e.lazySizes),e.removeEventListener("lazyunveilread",i,!0)};t=t.bind(null,e,e.document),"object"==typeof module&&module.exports?t(require("lazysizes")):"function"==typeof define&&define.amd?define(["lazysizes"],t):e.lazySizes?i():e.addEventListener("lazyunveilread",i,!0)}(window,function(o,r,e){"use strict";var s,t,i,n,d,c,a,u,f,l,m,h,p;function g(){this.ratioElems=r.getElementsByClassName("lazyaspectratio"),this._setupEvents(),this.processImages()}o.addEventListener&&(s=Array.prototype.forEach,d=/^picture$/i,a="img["+(c="data-aspectratio")+"]",u=function(e){return o.matchMedia?(u=function(e){return!e||(matchMedia(e)||{}).matches})(e):o.Modernizr&&Modernizr.mq?!e||Modernizr.mq(e):!e},f=e.aC,l=e.rC,m=e.cfg,g.prototype={_setupEvents:function(){function t(e){e.naturalWidth<36?n.addAspectRatio(e,!0):n.removeAspectRatio(e,!0)}function e(){n.processImages()}var i,n=this;function a(){s.call(n.ratioElems,t)}r.addEventListener("load",function(e){e.target.getAttribute&&e.target.getAttribute(c)&&t(e.target)},!0),addEventListener("resize",function(){clearTimeout(i),i=setTimeout(a,99)}),r.addEventListener("DOMContentLoaded",e),addEventListener("load",e)},processImages:function(e){for(var t=("length"in(e=e||r)&&!e.nodeName?e:e.querySelectorAll(a)),i=0;i
11 | function loadJS(u){var r=document.getElementsByTagName("script")[0],s=document.createElement("script");s.src=u;r.parentNode.insertBefore(s,r);}
12 |
13 | if(!window.HTMLPictureElement || !('sizes' in document.createElement('img'))){
14 | loadJS("ls.respimg.min.js");
15 | }
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
21 |
22 | 
49 |
50 |
51 |