I've followed a few different similar questions here on SO but it's not working for some reason. Can someone help me understand why? I want the loading image to show first, then fade out when the bigger image is loaded. The bigger image should fade in.
Fiddle: http://jsfiddle.net/95rpu029/2/
HTML
<article class="project">
<img width="375" height="375" src="http://dummyimage.com/375x375/000/fff" class="attachment-home-thumb">
</article>
JS
// Show loading image
$('article').prepend('<span class="loading-icon"><img src="http://i.imgur.com/lJpvTU3.gif" height="32" width="32" alt="Loading..."></span>');
// main image loaded ?
$('article img').on('load', function(){
// hide/remove the loading image
$('.loading-icon').fadeOut();
$('article').show();
});
CSS
article.project {
display: none;
float: left;
margin: 0 1% 2%;
max-width: 375px;
overflow: hidden;
position: relative;
width: 23%;
}
article.project img {
display: block;
margin: 0;
padding: 0;
max-width: 100%;
height: auto;
}