Single Image load

Author: Mayank Dixit Desc: This is a fiddle explaining how use jQuery to show a loading sign before an image is completely loaded on the page.

by Mayank Dixit

HTML

<div src="" class="media_detail_0"></div>

CSS

.media_detail_0{
    width:100px;
    height:100px;
    background:gray;
    background-size:100% 100%;
}

JavaScript

$(function(){
    $('.media_detail_0').css('background-image','url(https://www.amrms.com/ssl/iftafoundation/bluepay/Images/Loading_Animation.gif)');
    var img = $('<img src="">')
    img.attr('src',"http://good-wallpapers.com/pictures/1551/Big%20Car%20Steps.JPG");
    $(img).load(function(){
        $('.media_detail_0').css('background-image','url('+$(img).attr('src')+')');
    });
});