Grafika html/css

Jak zrobić by po wrzuceniu strony napisanej za pomocą html/css grafika (obrazek) nie ładował się od góry do dołu, tylko by

pokazywał się cały od razu?

Po pierwsze co za słownictwo - “wrzucić stronę”. :stuck_out_tongue: Chyba otworzyć stronę / wczytać stronę.

Można to zrobić np. za pomocą JavaScript: tworzysz element , podczepiasz mu zdarzenie onload (i oczywiście adres obrazka), a w kodzie obsługującym to zdarzenie wstawiasz ten element na stronie.

http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

Można też inaczej (np. przy pomocy CSS) - więcej tutaj: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

Pewnie masz ciężki obrazek zapisany w trybie hierarchicznym zamiast progresywnym. Zapisz go jescze raz np. w GIMP zaznaczając progresywny w opcjach zapisu do JPG.

Co do zastępowania obrazków i podmieniania w JS zdanie mam takie, że to fajny bajer do stron lub jakichś paneli administracyjnych, gdzie boty wyszukiwarek nie wchodzą, a nie na normalną stronę. Potem się okazuje że wynik np. w Google czy Bing nie jest zbyt odpowiedni, albo wyszukiwarka obrazków łapie jakiś pusty obrazek zamiast prawdziwego.

Co do typu plików to mam “jpg.”, ale i tak wolno się ładują

Bo są za ciężkie. Mają za dużą rozdzielczość etc. Zanim wrzucisz coś na serwer pomyśl czy rzeczywiście musi mieć to tak dobrą jakość. Nie ograniczaj rozmiaru pliku przez width etc (lepiej wstawić 2). Najlepiej daj jakiś przykład.

Kliknij na te 2 zdjęcia i zobacz jak się wczytują na wolnym łączy

Hierarhicznie, standardowo - wczytuje się od góry do dołu

Progresywnie/przyrostowo - najpierw całość potem się wyostrza (jak ustawić w GIMP

Możesz też w prosty sposób zmniejszyć rozmiar pogarszając jego jakość i zmieniając próbkowanie.

Przykładowe zdjęcie mniejsze o ok 25% (jakość 92%, próbkowanie 2x2,1x1,1x1, przyrostowy/progresywny) (jak ustawić w GIMP.