https://shop.christianhass.com/assets/addons/media_srcset/srcset.js

1var srcset = {
2    getImageElement : function(element)
3    {
4        if(element.nodeName.toUpperCase() === 'IMG')
5        {
6            return element;
7        }
8        else if(picture = this.getPictureElement())
9        {
10            return picture.query('img');
11        }
12
13        return null;
14    },
15
16    getPictureElement : function(element)
17    {
18        while (element.parentElement)
19        {
20            if(element.nodeName.toUpperCase() === 'PICTURE')
21            {
22                return element;
23            }
24
25            element = element.parentElement;
26        }
27
28        return null;
29    },
30
31    getElementWidth : function(element)
32    {
33        if(picture = this.getPictureElement(element))
34        {
35            width = picture.offsetWidth;
36        }
37        else
38        {
39            width = element.offsetWidth;
40        }
41
42        width*= window.devicePixelRatio || 1;
43
44        return width;
45    },
46
47    getSrcsetItems : function(element)
48    {
49        if(element.getAttribute('data-srcset'))
50        {
51            var srcset = element.getAttribute('data-srcset').split(','),
52                srcsetlength = srcset.length,
53                files = {};
54
55            for(var j = 0; j < srcsetlength; j++)
56            {
57                var set = srcset[j].trim(),
58                    file = set.substr(0, set.indexOf(' ')),
59                    width = parseInt(set.substr(set.indexOf(' ')+1).replace(/[^0-9]/, ''));
60
61                if(!isNaN(width) && file)
62                {
63                    files[width] = file;
64                }
65            }
66
67            return files;
68        }
69
70        return null;
71    },
72
73    getValidSrc : function(element)
74    {
75        var srcsets = this.getSrcsetItems(element);
76
77        if(srcsets)
78        {
79            var widths = Object.keys(srcsets).sort(function(a,b) { return parseFloat(a) - parseFloat(b); }),
80                width = this.getElementWidth(element),
81                newwidth = widths[widths.length - 1];
82
83            for(var j = widths.length-1; j > -1; j--)
84            {
85                if(parseFloat(widths[j]) > parseFloat(width))
86                {
87                    newwidth = widths[j];
88                }
89                else
90                {
91                    break;
92                }
93            }
94
95            if(newwidth)
96            {
97                return srcsets[newwidth];
98            }
99        }
100
101        if(image = this.getImageElement(element))
102        {
103            return image.getAttribute('src');
104        }
105    },
106
107    setSrc : function(element, src)
108    {
109        var image = this.getImageElement(element)
110        if(image)
111        {
112            var newimage = new Image();
113            newimage.onload = function(image){ image.src = this.src; }.bind(newimage, image);
114            newimage.src = src;
115
116            return true;
117        }
118
119        return false;
120    },
121
122    updateSrc : function(element)
123    {
124        var image = this.getImageElement(element);
125        if(image)
126        {
127            var src = image.src,
128                newsrc = this.getValidSrc(element);
129
130            if(src != newsrc)
131            {
132                this.setSrc(image, newsrc);
133            }
134        }
135    },
136
137    updateElements : function()
138    {
139        var elements = document.querySelectorAll('[data-srcset]'),
140            length = elements.length;
141
142        for(var i = 0; i < length; i ++)
143        {
144            this.updateSrc(elements[i]);
145        }
146    },
147
148    onResize : function()
149    {
150        window.clearTimeout(this.timeout);
151        this.timeout = window.setTimeout(this.updateElements.bind(this), 10);
152    },
153
154    init : function()
155    {
156        this.updateElements();
157        window.addEventListener("resize", srcset.onResize.bind(srcset) );
158        // this.addDomChangeListener();
159    },
160
161    // TODO : update after DOMCHANGE!
162    addDomChangeListener : function()
163    {
164        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
165
166        if(MutationObserver)
167        {
168
169            this.observer = new MutationObserver(function(mutations) {
170                for(var i = 0; i < mutations.length; i++)
171                {
172                    // check if this element has resized AND contains a data-srcset element
173                    this.updateSrc(element);
174                }
175            }.bind(this));
176
177            this.observer.observe(document, {
178              subtree: true,
179              attributes: true
180            });
181        }
182    },
183
184    removeDomChangeListener : function()
185    {
186        this.observer.disconnect();
187    }
188}
189
190
191document.addEventListener("DOMContentLoaded", srcset.init.bind(srcset) );