Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Responsive images feature detection
(function (window) {
document.addEventListener("DOMContentLoaded", function (e) {
var supports = {
srcset: false,
currentSrc: false,
sizes: false,
picture: false
var img = new Image();
if ("srcset" in img) {
supports.srcset = true;
if ("currentSrc" in img) {
supports.currentSrc = true;
if ("sizes" in img) {
supports.sizes = true;
if ("HTMLPictureElement" in window) {
supports.picture = true;
console.log('Picture support: ' + supports.picture);
console.log('sizes support: ' + supports.sizes);
console.log('srcset support: ' + supports.srcset);
console.log('currentSrc support: ' + supports.currentSrc);

This comment has been minimized.

Copy link

@wikt0r wikt0r commented Jun 17, 2015

Would you be so kind to explain me why DOMContentLoaded event is necessary? If you run these checks before DOMContentLoaded, you will get different results?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment