I am using jQuery's ajax function $.get() to download data from a page. I then cast that data to a jQuery object with $(data), allowing it to construct a DOM tree. I then append this data using append()
Is there a way for jQuery to fire an event similar to load which would tell me when the data's iframes/images/videos are done loading? Either before or after the append()?
According to the jQuery documentation, the load event only fires on specific objects:
This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.
I could loop through all of the data and attach a load listener to each of these objects, then count how many there are and have the load handler count how many have loaded (or have already been cached) until the number reaches the total. However I am looking for an alternative to this solution.
I have tried to attach the load event to the window object through load() and on() but these only fire once when the active page is initially loaded.
Here is my code:
$.get(url_string, function(data) {
// Create DOM elements out of the downloaded html text 'data'
// and take a subset of the DOM elements, where the id is #content
var myContents = $(data).find("#content");
// Insert DOM elements into the active page
$("#destination").append(myContents);
// Check when all images/iframes/video elements have loaded
// Does not work
$("#destination").load(function() {
alert("new stuff loaded");
});
// Does not work either
myContents.load(function() {
alert("new stuff loaded");
});
});
This question is linked to
- jquery event once all images are loaded (including cached images)?
- jQuery event for images loaded
- jquery: event for when ajax loaded content is all loaded (including images)
but the solution offered in these are all the one I mentioned above, where I would have to count how many of the objects there are, then check when the total is reached.
