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);    
  });