Если я создаю объект Image, но не добавляю его в DOM, загружает ли он изображение src на страницу пользователя?

Я ввел код ниже на своей странице:

var img = new Image(); 
img.src="abc.jpg"

abc.jpg - это счетчик страниц, который помогает мне подсчитывать просмотры страниц после их загрузки. В этом случае я создаю только элемент img, но не добавляю его в DOM.

Загружается ли изображение на страницу пользователя? Или мне нужно было добавить это в DOM?

Большое спасибо.

================================================================

Чтобы прояснить ситуацию, здесь представлена ​​демонстрационная страница: http://ad3.guruonline.com.hk/mobmax/testing/stackoverflow.html

Эта страница ссылается на JS-файл "stackoverflow.js":

введите описание изображения здесь

А для stackoverflow.js он создает переменную img, которая указывает на stackoverflow.jpg.

введите описание изображения здесь

Итак, я возвращаюсь к stackoverflow.html и просматриваю вкладку «сеть»: самое удивительное, что stackoverflow.jpg действительно загружен!

введите описание изображения здесь

Согласно ответу KK, stackoverflow.jpg не следует загружать, верно? Потому что я никогда не добавляю его в DOM. Может кто-нибудь дать объяснение по этому сценарию?

Спасибо!


person Kit Ng    schedule 19.04.2015    source источник
comment
Думаю, вам следует переформулировать вопрос. Насколько я понимаю, вы спрашиваете, загружается ли файл изображения, не так ли?   -  person Dan Homola    schedule 19.04.2015
comment
согласен, пересмотрел вопрос   -  person Kit Ng    schedule 19.04.2015


Ответы (2)


Обновить. После просмотра исправленного сообщения выяснилось, что изображение загружается независимо от того, добавлено оно в DOM или нет. Возможно, так работает объект Image. Еще одна интересная вещь заключается в том, что если вы определяете обычный объект Javascript и добавляете URL-адрес src в этот объект в качестве пары значений ключа, то есть:

img["src"]="http://www.example.com/image/sameple.jpg";

Тогда в этом случае нет загрузки изображения, что можно проверить, просмотрев вкладки сети. Итак, да, Image () загружает src, даже если изображение добавлено в DOM или нет.

Этот метод использовался для предварительной загрузки изображений, которые можно найти по этой ссылке для получения дополнительных сведений: http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/

Хороший вопрос!

Без добавления в DOM это просто переменная, и она будет рассматриваться как переменная. Вам нужно будет добавить его в DOM для загрузки изображения. Если вы хотите предварительно загрузить изображения, вы можете использовать тег скрытого изображения, который загружает изображение. Вы можете обратиться к этому решению для предварительной загрузки изображений: Как предварительно загрузить изображения без Javascript?

person K K    schedule 19.04.2015
comment
Я создал тестовую страницу (см. Пожалуйста, просмотрите вопрос еще раз: я добавил больше деталей). Кажется, что даже я не добавляю изображение в DOM, оно все равно загружается. Не могли бы вы помочь посмотреть ?? Спасибо. - person Kit Ng; 19.04.2015
comment
@KitNg Я посмотрел измененный пост. Похоже, что изображение загружается даже независимо от того, добавлено оно в DOM или нет. - person K K; 19.04.2015
comment
В спецификации нет гарантии, что изображения будут предварительно загружены, если не будут добавлены в DOM. Это чисто деталь реализации, которая работает таким образом в Chrome и IE7 +, но, например, не работает в firefox! - вы должны добавить к своему ответу, что такое поведение ненадежно. - person Falco; 07.08.2015

Вам нужно добавить его, создав узел Dom, поскольку без него элемент не будет добавлен в DOM

person Prashant Sharma    schedule 19.04.2015