Question

I have many div.image, each one has a huge size. How do I append a loader image when the div background is loading and remove the loader image after the background finished loading?

$('.image').append('<img src="image/loading.gif" class="loading" />');

<div class="image" style="background:url(https://lh3.googleusercontent.com/-3prblPgZ3n4/To9btWmWSFI/AAAAAAAAB2c/Ojs-7Ql3r6w/s720/DSC_2120.JPG) 0 0 no-repeat;width:720px;height:478px;overflow:hidden;"></div>

Answer 1

$('.image').append('<img src="image/loading.gif" class="loading" />');

$.get("https://lh3.googleusercontent.com/-3prblPgZ3n4/To9btWmWSFI/AAAAAAAAB2c/Ojs-7Ql3r6w/s720/DSC_2120.JPG", function(data){
    $('.image').html(data);
});

---

HERE is a different version (that works):

Fiddle: http://jsfiddle.net/maniator/ucdju/

var loading = $('<img src="image/loading.gif" class="loading" />');
$('.image').append(loading);

var image = $('<img>').attr('src', 'https://lh3.googleusercontent.com/-3prblPgZ3n4/To9btWmWSFI/AAAAAAAAB2c/Ojs-7Ql3r6w/s720/DSC_2120.JPG');

image.bind('load', function(data){
    $('.image').css('background-image',"url("+this.src+")")
        .width(this.width).height(this.height);
    loading.remove();
});