Galeria zdjęć, Preloading vs AJAX

Question

Hej Próbuję zrobić galerię zdjęć, ale utknąłem na tym, czy powinienem załadować wszystkie obrazy, gdy strona ładuje się, lub uzyskać ajax, aby poprosić o nowe obrazy, zanim zostaną one wyświetlone w galerii?

Poniższy przykład pokazuje, że oglądam drugi obraz i mam 2 ukryte obrazy załadowane, podczas gdy obraz 5 ładuje się za pośrednictwem żądania ajax. Pomyślałem, że jeśli trzymam dwa załadowane zdjęcia między obrazu oglądanego i ajax obraz się ładuje użytkownicy nie powinni oglądać załadować obrazu

Image Gallery (Viewing Single Image) 
    1  2  3  4  5 
+-------+-------+-------+-------+-------+ 
|  |Loaded |  | * |Loading| 
|Loaded | On |Loaded |Loaded | AJAX | 
|Hidden | Show |Hidden |Hidden |Request| 
+-------+-------+-------+-------+-------+ 

I miałaś używane ajax off localhost więc nie wiem jaką wydajność ma w porównaniu do ładowania obrazów ze stroną i ich ukrywania.

Answer 1

Zasadniczo można polegać na pamięci podręcznej przeglądarki, aby szybko załadować obrazy. Bardzo niezawodny sposób, że znalazłem to zrobić z następujących powodów:

$("<img>").attr('src', imageSrc); 

Stwarza to element obrazu, nie dołączyć go do DOM, ale przeglądarka będzie nadal pobrać obraz i buforować go . Dzięki temu możesz dodać element obrazu, który utworzyłeś, lub użyć nowego elementu obrazu z tym źródłem obrazu, i nie powinno być opóźnienia obciążenia.

Nie jestem pewien, co masz na myśli, ładując z ajax. Ponieważ żądanie ajax nie różni się od jakiegokolwiek innego żądania, nie powinno być różnicy w wydajności między używaniem "ajax" i "tylko ładowaniem" obrazów. Na serwerze może być trochę narzut, jeśli używasz skryptu do załadowania obrazu w jakiś sposób.

Answer 2

ja już taka sytuacja, w której wziąłem też zarówno próba znalezienia rozwiązania

Zasadniczo do podstawowego obrazu [Obrazek miniatur] załadunku można wykorzystać leniwy obciążenia dla strony

i do załadunku duży lub główny obraz, do którego można załadować miniaturę, i po napisaniu kodu do załadowania do niego dużego obrazu.

$('#GalleryImage img.mainImage').load(function() { 
    $(this).attr('src',$(this).attr('src').replace('thumb','large')); 
}); 

Może to pomoże Ci

Answer 3

Ostatecznie ładowania w czasie parsowania HTML, przy użyciu JavaScript/jQuery obciążenia wstępnego lub za pomocą ajax wziąć ten sam czas, szczególnie jeśli obraz jest duża (jeśli nie było, nie pytasz?).

System musi otworzyć połączenie, utworzyć żądanie GET dla pliku, a plik jest przesyłany przez sieć. Jeśli jest buforowany, to nie jest retransmitowany. Transfer sieci jest wąskim gardłem, a różne metody ładowania tego nie zmieniają.

Będziesz mieć wpływ czasu oczekiwania Twojego użytkownika na dwa sposoby:

• zmniejszyć rozmiar nośnika, na przykład korzystaj z miniaturek, bądź sprytny z kompresją, używaj ponownie dużych plików, aby wykorzystać buforowanie ...

• Dokładnie załaduj swój obraz, czyli to, co robi wstępne ładowanie obrazu (z AJAX lub bez, to samo). Prawdopodobnie nie wiadomo dokładnie, kiedy rozpocząć ładowanie obrazu, aby użytkownik nie czekał. Załadowanie trzech obrazów z wyprzedzeniem, jak pan proponuje, brzmi dla mnie dobrze. Użytkownicy mogą od czasu do czasu czekać, ale więcej to przesada.

do pokazu slajdów, można mieć tablicę przypomnieć którym obrazy są rozładowywane, jako miniatury lub w pełni załadowany, który zapewni Ci nie rób niepotrzebnych powtórzeń żądań.

Naprawdę nie dałem ci magicznej kuli ... Nie ma żadnej, ale mam nadzieję, że to pomoże.