CODEWITHSUNDEEP
javascriptimagehttpdom
Faust
Faust

Reputation: 15404

Should browsers automatically fetch images when src is dynamically redefined, w/o ajax?

I've noticed that when an image source attribute is dynamically changed (in my case, using jQuery), even if the image has never been called/cached by the browser (i.e. not pre-loaded), the browser still fetches it -- and without ajax. This has been working for me in all 5 major browsers (ie7+).

Question: Is this a formally standardized behavior that I could rely on, indefinitely?

Upvotes: 3

Views: 304

Answers (2)

Chris
Chris

Reputation: 1274

The DOM has two behaviors called reflow and repaint that will force a redraw of its elements (colors, sizes). These behaviors are triggered whenever there is a change in the DOM to the "input information used to construct the rendering tree" (There's a nice description of all this here: Rendering: repaint, reflow/relayout, restyle)

For your question, when this is triggered, browsers will also try to fetch src links, including javascript; so we can dynamically insert scripts/style-links and the DOM will execute it.

This also affects performance. You can imagine that in CSS we use different images for different states, for example, when styling background image changes for hover states. If the DOM were to fetch all images while loading, it would be slower on the initial rendering. so browsers are designed to load src dynamically.

Upvotes: 3

Richard Parnaby-King
Richard Parnaby-King

Reputation: 14862

As I understand it, when you make a change, for example with jQuery, to the document object model (dom) then the browsers will automatically re-render the altered element (in this case the img).

This also occurs in IE6.

Upvotes: 2

Related Questions