JSFiddle - React, Tailwind, and code Playground

by gaboom

HTML

<img class="preload" src="http://lorempixel.com/output/cats-h-c-1398-1474-5.jpg" />

CSS

.preload {
    background-image: url(http://bogadilovasijaszok.ewk.hu/_userfiles_/bogadilovasijaszok/lovacska.gif);
}

/* REMOVE !!! */
img {
    width: 200px;
    height: auto;
    min-height: 50px;
    border: 2px solid lime;
}

JavaScript

$(function() {
    $('img.preload').each(function() {
        var $img = $(this)
        var src = $img.attr('src')
        src += '?' + Date.now() // REMOVE !!!
        $img.attr('src-preload', src)
        $img.attr('src', null)
        
        var preload = new Image()
        preload.onload = $.proxy(function() {
            this.attr('src', this.attr('src-preload'))
        }, $img)
        preload.src = src;
    })
})