2

I have typed in below code in my page:

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

abc.jpg is a pagecounter which helps me to count the pageview once it is loaded. For this case, I only create the img element, but doesn't add it into DOM.

Is the image downloaded into user's page? Or I must needed to add it into DOM?

Thanks a lot.

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

In order to make the things more clear, here provides a demo page: http://ad3.guruonline.com.hk/mobmax/testing/stackoverflow.html

This page is referencing a JS file "stackoverflow.js":

enter image description here

And for stackoverflow.js, it creates a variable "img" which points to "stackoverflow.jpg"

enter image description here

So, I go back to stackoverflow.html, and view the "network" tab : the most surprising is, stackoverflow.jpg is actually downloaded!

enter image description here

Accoridng to KK's answer, stackoverflow.jpg shouldn't be downloaded, right? Because I never add it to DOM. Can someone provide a explanation on this scenrio?

Thanks!

K K
  • 17,794
  • 4
  • 30
  • 39
Kit Ng
  • 993
  • 4
  • 12
  • 24

2 Answers2

5

Update After going through the revised post ,it appears that the image loads irrespective of whether it is added into the DOM or not. Maybe this is how the Image object works. Another interesting thing is that if you define a normal Javascript Object and add the src url in that object as key value pair i.e.:

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

Then in this case there is no loading of image which can be verified by looking at the network tabs. So yes, Image() does loads the src even if the image is added into the DOM or not.

This technique has been used to preload images, which can be found in this link for more details: http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/

Good question though!

Without being added to the DOM, it's just a variable and it will be treated like a variable. You will need to add it to the DOM for image to be loaded. If you want to preload the images, you can use a hidden image tag which loads the image. You may refer to this solution for preloading the images: How to Preload Images without Javascript?

Community
  • 1
  • 1
K K
  • 17,794
  • 4
  • 30
  • 39
  • I created a testing page (see kindly view the question again: I've added more details). It seems that even I don't add the image into the DOM, the image is still downloaded. May you help to have a look?? Thanks. – Kit Ng Apr 19 '15 at 11:20
  • @KitNg I had a look at the modified post. It appears that image is loaded even irrespective of whether it is added in to DOM or not. – K K Apr 19 '15 at 13:34
  • There is no guarantee in the spec that images will be preloaded if not added to the DOM. This is purely an implementation Detail, which happens to work this way on Chrome and IE7+, but for example doesn't work in firefox! - you should add to your answer that this behaviour is not reliable. – Falco Aug 07 '15 at 10:08
0

You need to add it by creating a Dom node as without it, the element won't be added yo the DOM

Prashant Sharma
  • 114
  • 6