JSFiddle - React, Tailwind, and code Playground

by alexdickson

HTML

<img src="http://r0k.us/graphics/kodak/kodak/kodim08.png" alt="Image">

JavaScript

// This code is being executed just before the closing `</body>` tag.
var img = document.images[0];

// Break the browser's cache of the image for this example.
img.src = img.src + '?cache_bust=' + +new Date;

// Should be `false` as the image has not loaded.
// Why is it returning `true`?
console.log(1, img.complete);

img.addEventListener('load', function() {
    // Should be `true` as the image *has* loaded.
    console.log(2, img.complete);    
}, false);

// Change the image's `src` attribute to point to a fresh image. 
// I assumed reading the `complete` property directly after this would be `false`.
img.src = 'http://r0k.us/graphics/kodak/kodak/kodim11.png?cache_bust=' + +new Date;

// Expected `false` (as image has not been downloaded yet), why is it `true`?
console.log(3, img.complete);