You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.6 KiB
JavaScript
52 lines
1.6 KiB
JavaScript
(function(window, document) {
|
|
// Test if it already supports srcset
|
|
if ('srcset' in document.createElement('img'))
|
|
return true;
|
|
|
|
// We want to get the device pixel ratio
|
|
var maxWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width,
|
|
maxHeight = (window.innerHeight > 0) ? window.innerHeight : screen.height,
|
|
maxDensity = window.devicePixelRatio || 1;
|
|
|
|
// Implement srcset
|
|
function srcset(image) {
|
|
if (!image.attributes['srcset']) return false;
|
|
|
|
var candidates = image.attributes['srcset'].nodeValue.split(',');
|
|
|
|
for (var i = 0; i < candidates.length; i++) {
|
|
// The following regular expression was created based on the rules
|
|
// in the srcset W3C specification available at:
|
|
// http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/
|
|
|
|
var descriptors = candidates[i].match(
|
|
/^\s*([^\s]+)\s*(\s(\d+)w)?\s*(\s(\d+)h)?\s*(\s(\d+)x)?\s*$/
|
|
),
|
|
filename = descriptors[1],
|
|
width = descriptors[3] || false,
|
|
height = descriptors[5] || false,
|
|
density = descriptors[7] || 1;
|
|
|
|
if (width && width > maxWidth) {
|
|
continue;
|
|
}
|
|
|
|
if (height && height > maxHeight) {
|
|
continue;
|
|
}
|
|
|
|
if (density && density > maxDensity) {
|
|
continue;
|
|
}
|
|
|
|
image.src = filename;
|
|
}
|
|
}
|
|
|
|
|
|
var images = document.getElementsByTagName('img');
|
|
|
|
for (var i=0; i < images.length; i++) {
|
|
srcset(images[i]);
|
|
}
|
|
})(window, document); |