JSFiddle - React, Tailwind, and code Playground

HTML

The following images are printed through a while loop in PHP. I want the <b>red border to disappear when the data-src images are loaded</b>. Switch between "onLoad" and "onDomready" to see a difference.<br/><br/><br/>

<div id="element">
    <img class="heroStr border" id="pictureId_1" src="http://img.labnol.org/di/404_not_found.png" data-src="http://a.dryicons.com/images/icon_sets/euro_2008/png/128x128/croatia.png" />
    <img class="heroStr border" id="pictureId_2" src="http://img.labnol.org/di/404_not_found.png" data-src="http://c.dryicons.com/images/icon_sets/euro_2008/png/128x128/switzerland.png" />
    <img class="heroStr border" id="pictureId_3" src="http://img.labnol.org/di/404_not_found.png" data-src="http://a.dryicons.com/images/icon_sets/euro_2008/png/128x128/italy.png" />
    <img class="heroStr border" id="pictureId_4" src="http://img.labnol.org/di/404_not_found.png" data-src="http://a.dryicons.com/images/icon_sets/euro_2008/png/128x128/germany.png" />
    <img class="heroStr border" id="pictureId_5" src="http://img.labnol.org/di/404_not_found.png" data-src="http://b.dryicons.com/images/icon_sets/euro_2008/png/128x128/poland.png" />
    <img class="heroStr border" id="pictureId_6" src="http://img.labnol.org/di/404_not_found.png" data-src="http://c.dryicons.com/images/icon_sets/euro_2008/png/128x128/sweden.png" />
    <img class="heroStr border" id="pictureId_7" src="http://img.labnol.org/di/404_not_found.png" data-src="http://a.dryicons.com/images/icon_sets/euro_2008/png/128x128/romania.png" />
</div>

CSS

#element img{
    width: 50px;
    position: relative;
    border: 2px solid green;
}

#element img.border{
    border: 2px solid red;
}










body{
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #555;
}

JavaScript

jQuery(document).ready(function(){
    jQuery("#element img").load(function(){
        jQuery(this).attr('src', jQuery(this).data('src'));
    }); 
});