# 052: Galeria de carregamento suave, parte 2 - CSS-Tricks

Índice

No qual descobrimos os problemas que estávamos tendo para fazer o layout da coluna carregar bem. A correção foi remover o CSS que fazia as caixas de espaço reservado permanentes de proporção de aspecto funcionarem assim que a imagem carregasse (que mantém a proporção de aspecto sozinha). Em seguida, aplique uma classe CSS para fazer o “fade in” funcionar (alterando a opacidade de 0 para 1). Fácil extravagante e apenas um bocado de JavaScript.

Deve ser destacado que na versão live do site infelizmente esta técnica bacana não funcionou. Para que seja realmente eficaz, precisamos saber a proporção do lado do servidor da imagem, podemos criar a grade instantaneamente com os espaços reservados corretos. Infelizmente não temos essa informação disponível para nós na galeria real. Podemos usar PHP para obter as dimensões, mas é muito lento. Em vez disso, esperamos que todas as imagens carreguem e, em seguida, diminuam sua opacidade. Não tão legal e um pouco mais lento, mas pelo menos menos carregamentos rudes.

Artigos interessantes...