Digamos que temos uma apresentação de slides de fotos. as miniaturas dessas imagens são mostradas no div wrapper com um controle deslizante (que eu criei com o Jquery) e cada imagem é incluída em um<li> com um conjunto de plano de fundo CSS, o que obviamente representa a imagem. Eu escolhi usar uma imagem de fundo para um assunto de layout, porque todos são diferentes em tamanho e proporção.

As imagens vêm de um banco de dados e são criadas dinamicamente.

O que eu quero fazer é:

mostre uma mensagem "carregando" em cada<li> e aguarde até que o plano de fundo (imagem) seja carregado no cache e mostre-o com um fadeIn. Eles são a única maneira em que consigo pensar (não que eu possa, pois não tenho muita certeza de como e se é factível):

temporariamente desabilitar o plano de fundo para cada<li> enquanto mostra a mensagem "carregando"faça um loop para cada plano de fundo para obter o URL da imagemuse a função $ .get para carregá-lo e faça o que eu quiser depois de carregar

Além do possível, isso implicaria que eles seriam carregados em sequência; portanto, se não for carregado por algum motivo, o script nunca continuará!

Eu já vi alguns sites que usam JS para carregar imagens apenas quando visíveis pelo navegador, talvez seja o mesmo caso que estou procurando, já que estou usando um scroller e apenas uma parte das imagens é exibida em uma vez e quando a página for carregada