jquery - Remove class when an image is loaded -

i have image element looking this:

<img class="herostr border" id="pictureid_<?php echo $row['id']; ?>" src="images/no_img.png" title="<?php echo $row['name']; ?>" data-src="<?php echo $row['imageurl']; ?>" /> 

when data-src has finished downloading src switched (the "no_img" src shows temporary image until real 1 has finished loading). works code:

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

what want remove border class img when image loaded. suppose add jquery(this).removeclass('border'); function doesn't work.

what correct way of doing this? thanks!

— edit —

added jsfiddle can use try out. i'm trying achieve remove border class when data-src attribute has been loaded.

the problem is asynchronous call you're trying remove class not exist yet. can try use .done() function.