JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<img id="image" srcset="http://placehold.it/200x200 200w, http://placehold.it/300x200 300w, http://placehold.it/400x200 400w, http://placehold.it/500x200 500w, http://placehold.it/600x200 600w, http://placehold.it/700x200 700w, http://placehold.it/800x200 800w" sizes="100vw" src="http://placehold.it/200x200" />
<div id="src"></div>
<div id="currentSrc"></div>

JavaScript

var support = false;
(function() {
    var i = new Image();
    if ("srcset" in i && "sizes" in i) {
        support = true;
    }
})();

function outputSrcs() {
    srcDiv.innerHTML = 'img.src: ' + img.src;
    currentSrcDiv.innerHTML = 'img.currentSrc: ' + img.currentSrc;
}

if (support) {
    
}
else {
    document.body.innerHTML = 'This browser does not natively support srcset + sizes. Please <a href="http://caniuse.com/#feat=srcset">use one that does</a> for this demo to work.'
}

var img = document.getElementById('image');
var srcDiv = document.getElementById('src');
var currentSrcDiv = document.getElementById('currentSrc');

img.addEventListener('load', outputSrcs);

outputSrcs();