When a page loads an image, does it load it only once, or every time it is found in the markup?

Question

When a page loads an image, does it load it only once, or every time it is found in the markup? and what about jquery, does appending an img cause it to reload again? I ask this because I have a high res image, but need to you use it in many instances on the markup.

<img src="hello.jpg" />
<img src="hello.jpg" />
<img src="hello.jpg" />


var myimg = $('<img src="hello.jpg />');
$('img').append(myimg);

Answer 1

The browser will load the same image only once per page load, unless you are using aggressive anti caching headers (I can't see a reason why you would per page load).

You can see this for yourself by examining the net tab in Firebug. Write a loop and watch the net tab.

for (var i = 0; i < 10; i++) {
   var myimg = $('<img src="hello.jpg alt="" />');
   $('img').append(myimg);
}

Answer 2

it will load it at least once, on every page load... that's why preloading of an image is good...

Answer 3

It really depends on how the browser handles asset loading. Generally speaking though, a browser will load the image only once no matter how many times it is in the markup.

You can also use jquery and javascript to exploit browser caching (that is the saving of an image for preloading or future use) which will reduce the burden on your visitors by some amount. Check out http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript