JSFiddle - React, Tailwind, and code Playground

HTML

<section class="cache-demo">
    <h1>JavaScript Image cache demo</h1>
    
    <img alt="Stack Exchange logo" id="test-image" src="http://cdn.sstatic.net/stackexchange/img/se-logo.png" />
    
    <div class="buttons">
        <button id="cache-image">Cache Replacement Image</button>
        <button id="change-image">Change Image</button>
    </div>
</section>

JavaScript

(function () {
    var cachedImage;
    
    function setup () { 
        var cacheImageButton = document.getElementById('cache-image');
        
        if (cacheImageButton && 'addEventListener' in cacheImageButton) {
            cacheImageButton.addEventListener('click', function () {
                cachedImage = new Image();
                cachedImage.addEventListener('load', function () {
                    alert('Cached image loaded');            
                });
                cachedImage.src = 'http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png';
                alert('Created cached image');
            });
        }
        
        var changeImageButton = document.getElementById('change-image');
        
        if (changeImageButton && 'addEventListener' in changeImageButton) {
            changeImageButton.addEventListener('click', function (event) {
                if (!cachedImage) {
                    alert('Please select cache image button first!');
                    return;
                }
                
                var testImage = document.getElementById('test-image');
                
                if (!testImage) {
                    return;
                }
                
                testImage.src = cachedImage.src;
            });
        }
    }
    
    if (document.readyState === "complete") { // JSFIDDLE executes code in window.onload
        setup();
        return;
    }
    
    document.addEventListener('DOMContentLoaded', setup);
})()