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);
}