Ładowanie dużej ilości obrazków na stronie

Panowie i Panie, 
mam stronę internetową, gdzie na wielu podstronach jest masa zdjęć. Około 30 zdjęć dużych rozmiarów, które skalowane są do mniejszych thumbnaili.

Pytanie 1.
Teraz mam jedno zdjęcie, które jest skalowane do małych rozmiarów, a po kliknięciu w nie pojawia się pełnowymiarowe. Nie lepiej czasem taki efekt zrobić na dwóch obrazkach? Małym i dużym, gdzie duże będzie wczytywane tylko w przypadku, gdy ktoś kliknie w miniaturkę?

Pytanie 2.
Jak przyśpieszyć działanie strony? Mam tu na myśli wczytywanie tych zdjęć, bo teraz wczytywane są raczej wszystkie przy każdym odświeżeniu, mimo, że większości z nich od razu nie widać, bo trzeba do nich scrollować na dól strony. Rzućcie jakieś hasło na optymalizację tego.
 

Odpowiedź.1.

Nie do końca rozumiem, masz na zasadzie że duże zdjęcie jest tylko zmniejszone (ale nadal jest duże) i po kliknięciu pojawia się w pełnych wymiarach? Jeżeli tak to oczywiście zastosuj jakąś miniaturkę (oryginalnie mniejsze zdjęcie) i dopiero po kliknięciu ładuje się pełne (jakiś lightbox/shadowbox)

Odpowiedź.2. Lazy Loading np.: http://www.appelsiin...ojects/lazyload http://dinbror.dk/blazy/ etc

Odpowiedź.1.

Nie do końca rozumiem, masz na zasadzie że duże zdjęcie jest tylko zmniejszone (ale nadal jest duże) i po kliknięciu pojawia się w pełnych wymiarach? Jeżeli tak to oczywiście zastosuj jakąś miniaturkę (oryginalnie mniejsze zdjęcie) i dopiero po kliknięciu ładuje się pełne (jakiś lightbox/shadowbox)

 

Odpowiedź.2. Lazy Loading np.: http://www.appelsiin...ojects/lazyload http://dinbror.dk/blazy/ etc

Ad1.

Dokładnie tak mam, ale to głównie dlatego, że łącznie zdjęć jest koło 300 i były ważniejsze zajęcia niż tworzenie dla nich miniaturek itd Chciałem się tylko upewnić, że to jest konieczne i tak do zrobienia.

Ad2.

Dzięki, zapoznam się

Ad. Ad.1. Jak grafiki mają określone wymiary (bądź są w takich samych proporcjach) to zapoznaj się z PHPThumb i przepuść przez niego wszystkie grafiki

Można go połączyć z htaccess i zrobić tak że podajesz w adresie wymiar obrazka i jeżeli on nie istnieje to jest tworzony i wyświetlany  np:

org: /images/obrazek1.jpg

thumby dynamiczne:

/images/200x200/obrazek1.jpg

/images/100x100/obrazek1.jpg

etc

Użytkownik unbreak edytował ten post 01 kwietnia 2014 - 11:29

Zdjęcia są wszelakich rozmiarów i proporcji (takie zostały mi dostarczone). Planuję ręcznie je przerobić (niektóre trzeba po prostu podocinać, bo mają dziwaczne proporcje).