Preloader para imagens

E ai galera....

Estou tentando criar um preloader para exibir ate que as imagens sejam totalmente carregadas.

O projeto é direcionado para um pequeno portal de noticias diversas.

Estou tentando começar pelo seguinte:

script jquery

$(document).ready(function()

{

$( "#img1").removeClass("figure_pre");

$('#img1').css('background-image', 'url(img1.jpg)');

 

 

$( "#img2").removeClass("figure_pre");

$('#img2').css('background-image', 'url(img2.jpg)');

//e assim por diante....

});

tentei um for (loop) para localizar as imagens que preciso fazer isso mas foi em vão. o outro problema é saber como verificar e saber qual imagem ja foi carregada e em qual elemento.

html

<div class="assunto1">

 

<div class="figure figure_pre" id="figure_pre">

 

<a href="url">

<img src="imagens/preloader.gif">

</a>

 

</div>

 

<a href="url">

<p class="titulo_assunto">Titulo do assunto</p>

</a>

 

<a href="hrl">

<h2 class="titulo_artigo">Titulo do artigo</h2>

 

<p class="resumo_artigo">Resumo artigo...</p>

</a>

 

</div>

 

 

 

<div class="container1">

 

<div class="figure2" id="figure_pre">

 

<a href="url">

<img src="imagens/preloader.gif">

</a>

 

</div>

 

<a href="url">

<p class="titulo_assunto2">Titulo do assunto2</p>

</a>

 

<a href="hrl">

<h2 class="titulo_artigo2">Titulo do artigo2</h2>

 

<p class="resumo_artigo2">Resumo artigo2...</p>

</a>

 

</div>

as class são diferentes devido a estrutura que mantem o design.

agradeço desde ja.....