JSFiddle - React, Tailwind, and code Playground

by johntrepreneur

HTML

<div id="thisWorks">this works in Chrome. onerror event is called once.<img src="http://www.asdfjklasdfasdf.com/bogus1.png" onerror="fixit(this);" rsrc="http://eatfrenzy.com/images/success-tick.png" /></div>

<div id="thisDoesNotWork">this does not work in Chrome. onerror event is not called twice.<img src="http://www.asdfjklasdfasdf.com/bogus1.png" onerror="fixit(this);" rsrc="http://www.asdfjklasdfasdf.com/bogus2.png|http://eatfrenzy.com/images/success-tick.png" /></div>

CSS

#thisWorks
{
    border: 1px solid green;
    display: inline-block;
}

#thisDoesNotWork
{
    border: 1px solid red;
    display: inline-block;
}

JavaScript

function fixit(element)
{
    var $img = $(element);
    var arrPhotos = $img.attr('rsrc').split('|');

    // change the img src to the next available
    $img.attr('src', arrPhotos.shift());

    // now put back the image list (with one less) into the rsrc attr
    $img.attr('rsrc', arrPhotos.join('|'));

    return true;    
}