Run a code as soon as an div and all stuff inside it is rendered/loaded

Walle

I wonder if there is any JQuery function that can executed code as soon as an element (div) and all other elements and stuff inside it is has been completely rendered/loaded.

For example you have a div1 and inside it another div and inside it some table and inside the table maybe few small images icons etc. etc. and as soon as everything inside the first div is loaded then run a events.

I found a function named .load() that do something similar but as I understand it’s for element associated with URL only?. Or can load() do this somehow?

bradgrafelman

Walle;10979700 wrote:
I found a function named .load() that do something similar but as I understand it’s for element associated with URL only?.

Why would you say that? The definition of the .load() handler:

jQuery API wrote:
The load event is sent to an element when it and all sub-elements have been completely loaded

doesn't mention URLs at all.

EDIT: Woops, I see what you're talking about - the rest of that paragraph. :o

Have you tried it, though? I would've thought that it would apply to any element whose contents haven't been loaded yet.

Walle

I tested theirs example on the page with <img src="image.gif" alt="Book" id="book" /> and it work.

But this wont work or i do something wrong or it is just not possible with .load()

<div id="test"><div>some content, table etc and a test images <img src="image.gif"></div></div>

$('#test').load(function() {
  alert('Load was performed.');

});

johanafm

I'm guessing that the reason .load() has to be used for elements associated with a URL is that it relies on the communication protocol to know when something has "loaded", i.e. when the http request has completed. Each image element requires a separate get request by the browser, so .load works for these. A div does not require a get request, so .load() makes no sense for them.

An alternative way of expressing "element associated with a URL" would be "replaced elements". However, I don't know if images containing base64 encoded data as its src attribute rather than a URL are still concidered replaced or not. Perhaps this is the reason they chose an alternative wording. On the other hand, I don't know if .load() would work with a base64 encoded data source either.

You could put your .load handler on the image element, or you could go with the dom ready function instead, depending on what you want to do.