JSFiddle - React, Tailwind, and code Playground

by Eric Hynds

HTML

<div class="retina"
    data-src="http://placehold.it/100x100"
    data-src-2x="http://placehold.it/200x200">
    Loading...
</div>

CSS

.retina {
    border: 1px solid #ccc;
    background: #f1f1f1;
    width: 100px;
    height: 100px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
}

JavaScript

var Retina = (function() {
    var elems;
    
    var replace = function() {
        elems.forEach(function(elem) {
            var src = elem.getAttribute("data-src");
            var retina = elem.getAttribute("data-src-2x");
            elem.style.setProperty("background-image", "url(" + src+ ")");
            elem.textContent = "";
        });
    };

    return function(selector) {
        elems = [].slice.call(document.querySelectorAll(selector));
        console.log(elems);
        replace();
    };

}());

Retina(".retina")