En este momento encontré dos opciones para resolver este problema: el src inicial de todas las imágenes para ser una imagen en blanco de la base de datos 64
Esta opción no solo requiere un navegador moderno, sino que puede ser más lento en el lado del cliente, ya que el navegador debe decodificar en base 64 los datos de la imagen para producir la imagen.
El src inicial de todas las imágenes para ser una url de una imagen en blanco 1x1
Es un movimiento correcto siempre que la URL de la imagen en blanco para todos los espacios de imágenes sea exactamente la misma URL y que tenga una vida útil de caché larga definida en el encabezado HTTP "caché-control". El problema con esto es que a medida que se cargan los nuevos archivos de imagen, los cuadros de imagen saltarán al nuevo tamaño, lo que podría hacer que la experiencia del usuario no sea tan maravillosa.
La idea casi perfecta es esta ...
Cuando se inicie la página, presente una cuadrícula con cuadros de tamaño fijo que puedan acomodar cada imagen. Está bien si toda la cuadrícula no cabe en la pantalla. Luego cree JavaScript que se ejecute después de que se cargue el HTML, y en ese JavaScript, cree un nuevo elemento de imagen y adjúntelo a cada celda de la cuadrícula, luego configure la fuente de la imagen en el archivo de imagen correcto. Haga esto hasta que se llene la primera pantalla. luego detecte el desplazamiento dentro de javascript y luego, cuando ocurra el desplazamiento, repita el proceso anterior para las nuevas celdas.
Ahora, si desea lo mejor de lo mejor, y la calidad no es una gran preocupación, entonces lo que recomiendo (que también implementé en mi sitio) es construir una cuadrícula y configurarla de modo que la imagen de fondo de esa cuadrícula sea un hoja de sprites de todas las imágenes formateadas como cuadrados de imágenes. Este método es flexible y rápido de cargar, ya que se requiere una solicitud para todas las imágenes.
Aquí hay una plantilla HTML para usar si desea ir por la ruta rápida. Solo se hacen dos solicitudes. El código HTML y la única imagen. En este código, supongo que cada imagen de la hoja tiene 100 píxeles de ancho y 200 píxeles de altura y que cada imagen está perfectamente alineada una al lado de la otra sin espacios.
<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>
En mi código agregué 3 puntos. Eso significa que puede seguir agregando imágenes incrementando los números e incrementando la posición en 100 cada vez, siempre que su hoja de sprites tenga solo una fila de imágenes. Además, con algunos navegadores como Opera, es posible que deba agregar un signo negativo delante de los valores de posición de fondo para que funcionen.