# 052: Smooth Loading Gallery, del 2 - CSS-tricks

Innehållsförteckning

I vilken vi räknar ut problemen vi hade med att få kolumnlayouten att ladda in snyggt. Korrigeringen var att ta bort CSS som gjorde att bildförhållandets kvarvarande platshållarrutor fungerar när bilden laddas (som håller bildförhållandet helt av sig själv). Använd sedan en CSS-klass för att "blekna in" fungerar (ändra opacitet från 0 till 1). Lätt ostliknande och bara en klump JavaScript.

Det bör noteras att den levande versionen av webbplatsen tyvärr inte denna coola teknik fungerar. För att det ska bli riktigt effektivt måste vi känna till bildserversidan, vi kan skapa rutnät direkt med rätt platshållare. Tyvärr har vi inte den informationen tillgänglig för oss i det verkliga galleriet. Vi kan använda PHP för att få dimensionerna, men det är väldigt långsamt. Istället väntar vi på att alla bilder ska laddas och sedan bleknar i opacitet. Inte riktigt lika cool och lite långsammare, men åtminstone mindre belastningskänsla.

Intressanta artiklar...