Nesse momento, encontrei duas opções para solucionar esse problema: O src inicial de todas as imagens era uma imagem em branco da base de dados 64
Essa opção não requer apenas um navegador moderno, mas pode ser mais lenta no lado do cliente, pois o navegador deve decodificar com base 64 os dados da imagem para produzir a imagem.
O src inicial de todas as imagens é um URL de uma imagem 1x1 em branco
É uma mudança OK, desde que o URL da imagem em branco para todos os slots de imagem seja exatamente o mesmo URL e que tenha uma vida útil longa do cache definida no cabeçalho HTTP "controle de cache". O problema é que, à medida que os novos arquivos de imagem são carregados, os quadrados da imagem saltam para o novo tamanho, o que pode tornar a experiência do usuário não tão maravilhosa.
A idéia quase perfeita é essa ...
Quando a página for inicializada, apresente uma grade com caixas de tamanho fixo que podem acomodar cada imagem. Tudo bem se a grade inteira não couber na tela. Em seguida, crie o javascript que é executado após o carregamento do HTML e, nesse javascript, crie um novo elemento de imagem e anexe-o a cada célula da grade e defina a origem da imagem no arquivo de imagem correto. Faça isso até que a primeira tela seja exibida. Em seguida, detecte a rolagem no javascript e, quando ocorrer a rolagem, repita o processo acima para as novas células.
Agora, se você deseja o melhor dos melhores, e a qualidade não é uma grande preocupação, o que eu recomendo (que eu também implementei no meu site) é construir uma grade e configurá-la de forma que a imagem de plano de fundo dessa grade seja uma folha de sprite de todas as imagens formatadas como quadrados de imagens. Esse método é flexível e rápido de carregar, pois é necessária uma solicitação para todas as imagens.
Aqui está um modelo de HTML para usar se você quiser seguir o caminho mais rápido. Apenas duas solicitações são feitas. O código HTML e a imagem única. Neste código, presumo que cada imagem da planilha tenha 100 pixels de largura e 200 pixels de altura e que cada imagem esteja perfeitamente alinhada uma com a outra, sem espaços.
<html>
<head>
<style type="text/css">
#imagegrid {background-color: black; background-image:url('http://example.com/url/to/imagesheet.jpg');}
A {display:block;width:100px;height:200px;margin:10px;float:left;}
#image1{background-position: 0px 0px}
#image2{background-position: 100px 0px}
#image3{background-position: 200px 0px}
...
#imageN{background-position: XXXpx 0px}
</style>
</head>
<body>
<div id="imagegrid">
<a href="image_one.htm" id="image1"></a>
<a href="image_two.htm" id="image2"></a>
<a href="image_three.htm" id="image3"></a>
...
<a href="image_N.htm" id="imageN"></a>
</div>
</body>
</html>
No meu código eu adicionei 3 pontos. Isso significa que você pode continuar adicionando imagens aumentando os números e aumentando a posição em 100 a cada vez, desde que sua planilha de sprites tenha apenas uma linha de imagens. Além disso, em alguns navegadores como o Opera, pode ser necessário adicionar um sinal negativo na frente dos valores da posição de segundo plano para que eles funcionem.