W początkowej fazie serwisu, gdy skrypty nie były jeszcze optymalizowane i zdjęcia ładowały się dłuższą chwilkę, zacząłem się zastanawiać jak uzyskać efekt, aby podczas ładowania obrazka wyświetlany był tekst o tym informujący.

Wpadłem na pomysł zastosowania właściwości backgroud-image dla tagu img z bardzo małym obrazkiem z napisem informującym o ładowaniu obrazka. Pomysł wypalił :)

A więc tak - tworzymy strukturę dokumentu i dodajemy do niej fragment: <img class="loading" src="obrazek.jpg" alt="Nasz obrazek"/> Następnie stosujemy do niej następujące style: img.loading { background-image: url(loading.jpg); background-position: top left; background-repeat: no-repeat; width: 240px; height: 180px; } Istotne jest podanie rozmiarów obrazka, ponieważ, gdy tego nie zrobimy, niektóre przeglądarki nie wyświetlą nam również tła (obrazek bedzie miał bardzo małe rozmiary, przez co nie będzie widoczny napis na tle).

Wpisy o podobnej tematyce

• Zabezpieczanie formularza przy użyciu tokenów
• Menu horyzontalne stylizowane na zakładki
• Referencje w PHP
• Wtyczki webmastera
• "Zen stosowania CSS"