and I installed it through myImg....">
Geek Answers Handbook

The performance of setting img src to a fixed value?

If I have an img tag like

<img src="example.png" />

and I installed it through

 myImg.src = "example.png";

to the same value again, will it be no-op or will browsers redraw the image unnecessarily? (I'm mostly interested in the behavior of IE6-8, FF3.x, Safari 4-5, and Chrome.)

I need to change several (hundreds) of images at once, and manually comparing the src attribute may be a little redundant - I suppose the browser already does this for me?

+6
performance javascript html
source share
3 answers

Do not assume the browser does this for you. I am working on a project of a similar scale that requires hundreds of (dynamically loaded) images with speed as a top priority.

Caching the src property of each element is highly recommended. it is expensive to read and set hundreds of properties of the DOM element , and even setting src to the same value can lead to reflow or paint events .

[Edit] Most of the slowness in the interface was caused by all of my cycles and processes. After they were optimized, the user interface was very fast even with hundreds of images being constantly downloaded.

[Edit 2] In light of your additional information (images are all small status icons), maybe you should just consider the class for each status in your CSS. In addition, you may need to use cloneNode and replaceNode for a very quick and efficient replacement.

[Edit 3] Try to fully position the image elements. It will limit the number of remelts that should occur, since absolutely positioned elements are out of flow.

+4
source share

When you change a bunch of elements at the same time, you usually block the user interface flow, so only one redraw occurs after JavaScript is finished, which means that redrawing to one image is really not a factor.

I would not double-check something here, let the browser take care of it, the new ones are smart enough to do it in an efficient way (and this has never been a problem anyway).

The case you will see here is loading new images and flowing the page when loading, which is expensive here, the existing images are very small compared to this cost.

+2
source share

I recommend using the CSS Sprite technique. Additional information: http://www.alistapart.com/articles/

You can use an image containing all the icons. Then, instead of changing the src attribute, you update the background property.

+2
source share

More articles:


All Articles