JSFiddle - React, Tailwind, and code Playground

by sanford

HTML

<img id="testgood" src="/favicon.png">
<img id="testbadearly" src="/bad_path">
<img id="testbadlate" src="/bad_path">

JavaScript

// add one event right ondomload, which will probably be in time for the error event here in jsFiddle
document.id('testbadlate').addEvent('error', function(){
     console.log(this,'image load failure');
     this.store('handled_error',true);
});

//purposely delay adding the other event
(function(){
    document.id('testbadearly').addEvent('error', function(){
     console.log(this,'image load failure');
     this.store('handled_error',true);
     });
}).delay(1000);

(function(){
    /* gather images that appear to have no height/width 
    and which attempted to load  before the event was bound */
    console.log('rescanning early images');
    Array.each($$('IMG'),function(itm,idx) {
        if ( !itm.naturalHeight && !itm.retrieve('handled_error') ) {
             // reload from src to trigger event
             itm.set('src',itm.get('src'));
         }            
    });
}).delay(3000);