randerowanie / wyświetlanie / ładowanie tylko widocznej części strony

0

Cześć.
Szukałem, ale nie znalazłem, a może któryś z Was, koledzy i koleżanki, zna kod na pokazanie / randerowanie / wyświetlanie / ładowanie tylko widocznej części strony?
Zrobiłem (bo stworzyłem to zbyt wielkie słowo na tabelkę ze zdjęciami w html) bardzo prostą, tymczasową (nie bijcie) galerię zdjęć, ale zbyt duża ilość obrazków, powoduje, że strona wczytuje się bardzo długo.
Proszę o poradę / kod.

Galerię będę przerabiał, ale na razie nie mam na to aż tyle czasu ile bym chciał.
http://taniepranie.zgora.pl/galeria.php

1

Lazy loading jak wyżej, lub zrób preloader na 1-2s. aby zdążyły się załadować, na gtmetrix po teście też proponuje zoptymalizowaną grafikę, lub przejdź na WebP (są konwersje online w google).

0

@czysteskarpety: webp bym jeszcze nie proponował, chyba że jako jedna z wersji. ff dopiero otrzymuje, safarii nawet nie myśli dodać wsparcia

Ja bym to proponował do jpg https://imageoptim.com/online , a dla png to https://css-ig.net/pingo

0

Dziękuję wszystkim za odpowiedzi i poświęcony czas.
Wiem przynajmniej, że nazwa się to Lazy loading i teraz będę o tym czytał i próbował wdrożyć. No chyba, że znajdę gdzieś, albo sam jakoś stworzę galerię, dzięki której przeglądarka nie będzie musiała ładować tylu zdjęć.
Może podziele to co mam na partie np po 20 miniatur? Jeszcze się zastanowię.
Bardzo dziękuję ; ]

0

Nie ilość jest tu problemem a wielkość zdjęć
Nie masz problem załadować 1000 zdjęć po 1 kB
problem gdy te 1000 zdjęć ma średnio 1 MB wielkości ;)

0

A jeśli zdjęcie ma mega, ale zmniejszam jego rozmiar width, height, to jego rozmiar się zmienia?

Ściągnąłem miniaturkę na dysk i ma 4 mega ; /

0

Nie dość, że rozmiar pobieranego zasobu się nie zmienia, to jeszcze przeglądarka musi to odpowiednio zrenderować. Powinno się ładować rysunki o takich rozmiarach, jak te wyświetlane. Dopiero jak strona jest responsywna, to można zmniejszać rozmiar aby go dopasować do ekranu (ale lepiej mieć 2-3 wersje rysunku dostosowane do różnych rozmiarów ekranu i podmieniać je w css lub js).

4 mega jest nie do przyjęcia. Miniaturki powinny mieć kilka - kilkanaście kilo.

1 użytkowników online, w tym zalogowanych: 0, gości: 1