2012-11-03 5 views
5

jeśli używam składni jQuery: $("<img src='img.jpg'>"), czy obraz zostanie faktycznie pobrany na klienta? czy muszę go dołączyć do ciała, aby go pobrać?

Odpowiedz

6

Nie trzeba dodawać elementu obrazu do dokumentu, aby obraz został załadowany.

Sam element obrazu zażąda obrazu zaraz po jego utworzeniu (i tak szybko, jak ma wartość src).

Oglądaj acivity netto (w Firebug/Developer Tools) podczas uruchamiania to: http://jsfiddle.net/Guffa/AvgVN/

Google "javascript preload" znaleźć mnóstwo przykładów kodu, który używa tego.

+0

Myślałem, że to było złe, ale tak nie jest! Pamiętam, że tak działały także późniejsze "preloadery" obrazów z lat 90. –

+0

Ja też. Faktem jest, że jest on faktycznie natychmiast pobrany! – techfoobar

5

Tak, obraz zostanie pobrany natychmiast.

Nawet jeśli utworzony element Image nie znajduje się jeszcze w DOM, przeglądarka będzie nadal pobierać go zaraz po ustawieniu atrybutu .src.

Używanie własnego awatara, po prostu zrobił to w konsoli:

> i = $('<img src="http://graph.facebook.com/100002351317104/picture?type=large">'); 
... 
> i[0].width 
180 

pokazując, że obraz jest rzeczywiście załadowany.

Jeśli myślisz o tym, tak naprawdę musi być w przypadku, w przeciwnym razie wstępne ładowanie obrazu może nigdy nie zadziałać. Wstępne ładowanie obrazu zależy od utworzenia odłączonego węzła Image i ustawienia jego src, co jest dokładnie tym, co zrobi $("<img src=...>").

+0

+1 It * is * faktycznie natychmiast pobrać! – techfoobar

2

Powiedziałbym tak, a może zależy od przeglądarki.

$("<img src='http://crssrd.com/web_apps/index/themes/crssrd.com/images/loading.gif'>")​ 

testu to na Chrome na przykład: http://jsfiddle.net/SMnhU/ Obraz jest natychmiast pobrać.

+0

Czy możesz podać przykład, w którym przeglądarka _nie robi, aby natychmiast pobrać obraz? –

+0

Nie, wszystkie przeglądarki testowałem i pobierałem je natychmiast. Ale nie testowałem na przykład opery, ale naprawdę zdziwiłbym się, gdyby była inna w tej przeglądarce. –

+0

Może więc można bezpiecznie powiedzieć, że nie zależy to od przeglądarki :) –

Powiązane problemy