jquery select this parent from inside image.

Question

I have the following code, i'm trying to make a loader appear then the image fade in once it is loaded. I want to make the function reusable so i can just add an image to a div with the loader id and it will work.

I cant figure out how to select the parent loader div from inside the image. the commented line works fine but, i think that will select all divs. i just want to select the parent loader div. can anyone help, thanks.

<div id="loader" class="loading">
  <img src="http://www.inhousedesign.co.nz/images10/caravan_01.jpg" style="display: none;"/>
</div>  

$("#loader").each(function(){
    var source = $(this).find("img").attr('src');
    var img = new Image();

    $(img).load(function(){
      $(this).hide();
      //$("#loader").removeClass('loading').append(this);
      $(this).parents("div:first").removeClass('loading').append(this);
      $(this).fadeIn(800);
    }).attr('src', source);    
  });  

Answer 1

Why not use the parent method?

 $(this).parent().removeClass('loading').append(this);

Answer 2

The easiest way, is the make the background of the div have loading.gif...

#div {
   background:url(loading.gif) no-repeat center center;
}

And then have the img fade in when it loads.

Answer 3

As derek says. the #loader selects div with id loader and there should only be one

If you are trying to make generic for many give the div a class and use parent selector

e.g

$(this).parent().removeClass('loader')