Chcę bardzo szybko załadować wiele obrazów na stronie internetowej, jaka jest najlepsza metoda?

Question

UPDATE: To pytanie jest nieaktualne, prosimy o zignorowanie

Tak .. mój pomysł jest załadowanie pełne manga/komiks na raz, ze pasek postępu włączony, i zrobić coś w rodzaju strumienia, jak:

• Moja strona wczytuje podstawowy (HTML + CSS + JS) (oczywiście)
• Jak zrobić, zacznę ładowania IMG (adresy URL są przechowywane na JS var) z mojego serwera, jeden raz (lub kilka szybszy sposób), więc mogę zrobić rodzaj paska postępu.
• ALTERNATYWNA: Czy istnieje sposób na załadowanie pliku kompresującego z wszystkimi plikami i dekompresją w przeglądarce?
• ALTERNATYWA: Byłem też na myśli oszczędność następnie jako ciągi i następnie dekodować, są one przeważnie .jpg
• ilustracje nie muszą pokazać od razu, tylko trzeba wywołania zwrotnego, gdy są one wykonane.

XTML i HTML5 jest dopuszczalne

Jaki jest najszybszy sposób, aby wczytać serię zdjęć na mojej stronie?

EDIT Od @Oded komentarzu .. pytanie jest naprawdę, co jest najlepszym tech dla obrazów załadunku i użytkownik nie musi czekać za każdym razem jest przekręca „stronę”. Kierowanie na bardziej podobne doświadczenia, na przykład podczas czytania komiksów w prawdziwym życiu.

EDIT2 jak niektórzy ludzie pomógł mi uświadomić sobie, szukam pre-ładowarki na sterydach

Edit3 Brak technicy css zrobi

Answer 1

Jeśli podzielisz duże obrazy na mniejsze części, będą one ładowane szybciej w nowoczesnych przeglądarkach z powodu potokowania.

Answer 2

alternatywa: Czy istnieje sposób załadować plik kompresujący ze wszystkimi plikami i rozpakować w przeglądarce?

Formaty obrazu są już skompresowane. Nic nie zyskujesz, łącząc i próbując je dalej kompresować.

Możesz można po prostu trzymać zdjęcia razem i używać background-position, aby wyświetlić różne ich części: nazywa się to "spriting". Ale spriting jest w większości użyteczny dla mniejszych obrazów, aby zmniejszyć liczbę żądań HTTP do serwera i nieco zmniejszyć opóźnienie; w przypadku większych obrazów, takich jak strony manga, korzyści nie są tak duże, być może większe od konieczności pobrania jednego gigantycznego obrazu naraz, nawet jeśli użytkownik przeczyta tylko kilka pierwszych stron.

ALTERNATYWA: Byłem też na myśli oszczędność następnie jako ciągi i następnie dekodować

Co by to osiągnąć? Przesyłanie w postaci ciągu znaków byłoby w większości przypadków znacznie wolniejsze od nieprzetworzonego pliku binarnego. Następnie, aby pobrać je z ciągów JavaScript do obrazów, musisz użyć adresów URL data:, które nie działają w IE6-IE7 i są ograniczone do ilości danych, które można w nich umieścić. Ponownie ma to na celu przede wszystkim małe obrazy.

Myślę, że wszystko, czego naprawdę chcesz, to preinstalator obrazu o standardowej konfiguracji.

Answer 3

Jak zrobić, zacznę ładowania IMG (The adresy są przechowywane na JS var) z mojego serwera , jeden czas (lub szybciej sposób), więc mogę zrobić coś w rodzaju postępu barze.

Twoja przeglądarka pobiera najpierw kod HTML, tak jak wie, aby załadować dowolny JS/obrazy, do których się odwołujesz. Próbujesz wymyślić coś, co już istnieje .

Po prostu upewnij się, że Twoja manga składa się z wielu obrazów o znanym rozmiarze, określonych w tagach img. Większość przeglądarek ma pasek postępu pokazujący, że ładuje zasoby dla ciebie. Nie spowodujesz, że ładowanie dużych obrazów będzie szybsze, chyba że zwiększysz szybkość, z jaką serwer je obsługuje, lub połączenie internetowe użytkownika, lub kompresujesz je, aby zmniejszyć pliki obrazów (prawdopodobnie kosztem jakości obrazu).

Answer 4

Można wczytywać obrazy w użyciu javascript:

var x = new Image(); 
x.src = "someurl"; 

to będzie działać jak ta, którą określił jako „zapisywanie obrazu w ciągach”.

Answer 5

Uwaga: JPG i PNG są już skompresowane.

Możesz spróbować użyć techniki "spriterzy CSS". Zasadniczo chodzi o to, że używasz swojego ulubionego programu do edycji obrazów, aby umieścić wszystkie obrazy w jednym obrazie. Szybciej to wysłać, ponieważ utracisz narzut na plik/plik w zakresie kodowania obrazu i wysyłania obrazu. Po stronie klienta używasz CSS, aby wybrać tylko część całkowitego obrazu, który jest używany w jednym miejscu.

http://www.alistapart.com/articles/sprites/
http://www.fiftyfoureleven.com/weblog/web-development/css/css-sprites-images-optimization

I/LUB

Można użyć leniwy załadunku tylko load gdy przychodzą do widzenia.
http://www.appelsiini.net/projects/lazyload

Answer 6

Oto coś można spróbować, które przez zbieg prostu zakodowane w górę:

(function() { 
    var imgs = [ "image1.png", "image2.png", ... /* all your image names */ ], 
    index = 0, 
    img; 

    function loader() { 
    if (index >= imgs.length) return; 
    (img = new Image()).onload = loader; 
    setTimeout(function() { img.src = "/path/to/images/" + imgs[index++]; }, 1); 
    } 

    loader(); 
})(); 

Plop wszystkie imiona wasze zdjęcie (lub te, które chcą preload) do tablicy, i upewnić się, że skrypt uruchamia się po załadowaniu twoich stron. Przejdzie przez listę obrazów, ładuje je, a następnie przechodzi do następnego, gdy kończy się każdy obraz. (Wywołanie setTimeout polega na upewnieniu się, że program obsługi "onload" nie zostanie wywołany, gdy nadal znajdujesz się w treserze).

Prawdopodobnie chcesz zrobić to dla wielu "śrub i nakrętek" obrazy dla całej witryny - innymi słowy, każda strona spróbuje załadować obrazy do wszystkiego. Kiedy znajdą się w pamięci podręcznej, nie zajmie to dużo czasu. Alternatywnie możesz uruchomić ten skrypt tylko na kilku stronach, takich jak ekrany logowania i główna strona główna.Oczywiście, jeśli masz witryny, takie jak Flickr, to prawdopodobnie nie chcesz wczytywać wszystkie obrazy :-)

Answer 7

Image preloaders już od wieków. Naprawdę nie trzeba ładować je wszystkie na raz, można to zrobić na żądanie [gdy osoba ładuje następną stronę, można pobrać obraz po]

Answer 8

Przekształcanie w duszki

Wystarczy spojrzeć jak robi to Facebook: http://b.static.ak.fbcdn.net/rsrc.php/z3JQK/hash/11cngjg0.png

Jeden obraz, który ładuje SZYBCIEJ niż seria małych obrazów. Aby wyświetlić ikonę, po prostu utwórz element div ze stałymi wymiarami i przenieś tło do środka. Twój div działa jako rzutnia dla dużego obrazu. Za pomocą położenia tła można przejść do odpowiedniej części obrazu. Cała reszta jest ukryta.

Różne domeny

coś, czego prawdopodobnie nie wiedziała - Internet Explorer ma limit połączeń na serwerze. Możesz przeczytać o tym tutaj: http://support.microsoft.com/?scid=kb;en-us;183110&x=17&y=11 (here are exact numbers).

Co to oznacza - jeśli użytkownik korzysta z IE7, będzie mógł załadować TYLKO 4 (lub 2) pliki w tym samym czasie ze swojego serwera, bez względu na szybkość połączenia z Internetem.

Aby przyspieszyć działanie, można utworzyć kilka subdomen: serwer1.mydomena.com, serwer2.mydomena.com, serwer3.mydomena.com itd. - a użytkownik może pobierać wiele plików o wiele szybciej, ponieważ używa się różnych hostów do obsługi różnych plików.

Answer 9

• Moja strona wczytuje podstawowy (HTML + CSS + JS) (oczywiście)
• Jak zrobić, zacznę ładowania IMG (adresy URL są przechowywane na JS var) z mój serwer , jeden raz (lub jakiś szybszy sposób), aby utworzyć pasek postępu.
• Obrazy nie muszą być wyświetlane od razu, po prostu potrzebuję oddzwonienia po ich zakończeniu.

Jeśli chcesz załadować 10 zdjęć tak szybko, jak to możliwe, należy umieścić 10 <img> tagi na stronie, po jednym dla każdego obrazu. Użyj Javascript, aby ukryć wszystkie oprócz aktualnie oglądanego obrazu; dodaj następne/tylne linki, które używają JS, aby ukryć bieżący obraz i pokazać następny. Wiele przeglądarek ma już pewną formę paska postępu, a dzięki robieniu rzeczy za pomocą zwykłego starego HTML, będzie działać poprawnie.

Próbujesz ponownie wymyślić wszystkie te funkcje w JavaScript bez żadnego powodu. Nie zrobisz tego lepiej niż przeglądarka.

Wszystko to powiedziawszy, jest to prawdopodobnie zły pomysł. Możesz zrzucić 15MB stron komiksowych w oknie przeglądarki, aby opuścić użytkownika po przeczytaniu pierwszej strony. Zamiast próbować wstępnego załadowania wszystkich obrazów, powinieneś używać JS, aby zachować zawsze następną stronę (lub dwie) wstępnie załadowaną, a nie całą.