# 051: Galería de carga suave, parte 1 - Trucos CSS

Anonim

Tenemos el diseño de cuadrícula para la Galería en marcha. Desafortunadamente, la carga es un poco abrupta y torpe. Esto se debe a que las columnas CSS3 están diseñadas para dividir el contenido entre cada una de las columnas de manera uniforme, pero las imágenes a veces tardan un momento en cargarse y aún no tienen un ancho / alto para usar. Entonces, cuando aparecen, las columnas deben reorganizarse.

Sin embargo, creo que podemos evitar este problema con algo de JavaScript. Como conocemos la altura y el ancho de las imágenes, podemos crear un cuadro con la relación de aspecto correcta para colocarlo como marcador de posición. Luego, cuando se cargue la imagen, reemplazaremos el marcador de posición con la imagen.

Al final del video estamos en el camino correcto, pero está un poco roto. No se preocupe, lo arreglaremos en el siguiente video.