En el que descubrimos los problemas que teníamos para que el diseño de la columna se cargara correctamente. La solución fue eliminar el CSS que hacía que los cuadros de marcador de posición que respetaban la relación de aspecto funcionaran una vez que se cargaba la imagen (que mantiene la relación de aspecto por sí sola). Luego aplique una clase CSS para hacer que el "fade in" funcione (cambiando la opacidad de 0 a 1). Fácil y cursi y solo una pizca de JavaScript.
Cabe señalar que en la versión en vivo del sitio, desafortunadamente, esta técnica genial no funcionaría. Para que sea realmente eficaz, necesitamos conocer la relación de aspecto del lado del servidor de imágenes, podemos crear la cuadrícula al instante con los marcadores de posición correctos. Desafortunadamente, no tenemos esa información disponible en la galería real. Podemos usar PHP para obtener las dimensiones, pero es muy lento. En cambio, esperamos a que se carguen todas las imágenes y luego se desvanecen en su opacidad. No es tan genial y un poco más lento, pero al menos carga menos de janky-ness.
