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

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

• javascript
• jquery
• html

Share Improve this question Follow asked Jul 27, 2010 at 2:29 anthonypliuanthonypliu 12.4k2828 gold badges9595 silver badges154154 bronze badges 5

• it will load it at least once, on every page load... that's why preloading of an image is good... – Reigel Gallarde Commented Jul 27, 2010 at 2:32
• adding to alex's first answer: which is why css sprites are bad-ass - did you know the all the images google's pacman (google./pacman) uses are in one image? (google./logos/pacman10-hp-sprite-2.png) – Dan Heberden Commented Jul 27, 2010 at 2:35
• @Dan Don't forget Stack Overflow also uses sprites. – alex Commented Jul 27, 2010 at 3:38
• @Dan Also, I think the original Pacman used a large sprite like that too! (well at least I know NES games did) – alex Commented Jul 27, 2010 at 3:39
• 1 yeah, old-school games were the ones to find out they could fit more data on the cartridges because they could drastically reduce sector-data loss with one big-ass image – Dan Heberden Commented Jul 27, 2010 at 4:30

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

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

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./blog/09/12/preloading-images-jquery-and-javascript