CODEWITHSUNDEEP
jqueryload
oscurodrago
oscurodrago

Reputation: 808

Know when new HTML elements are fully loaded with .load()

i have some problems with .load() jquery function, i'm tring to pre load some HTML in a hidden block than when all new elements are loaded i want move it in the dom tree. that is my script

var preloader = $(document.createElement("div")).attr('id', 'msgloader').css({ visibility: "visible"}); // visible is just for test it 
preloader.html( newHtml ); // newHtml is a string with html elements like images table etc.
$("body").append(preloader);
preloader.load(function() { alert("div is ready"); });

i don't know why but when the new HTML in msgloader is ready and fully loaded never trigger alert() message do you know where i make miskate?

Upvotes: 0

Views: 700

Answers (3)

Rich O'Kelly
Rich O'Kelly

Reputation: 41757

See the caveats for the load method:

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

  • It doesn't work consistently nor reliably cross-browser
  • It doesn't fire correctly in WebKit if the image src is set to the same src as before
  • It doesn't correctly bubble up the DOM tree
  • Can cease to fire for images that already live in the browser's cache

It's not a particularly reliable way of determining when all content of an element has finished loading. You may consider using the overloaded load method to load your html from an url, and adding to the DOM once that load is complete (or alternatively, just add to the DOM on DOM ready).

Upvotes: 0

Craig
Craig

Reputation: 134

Any reason why you wouldn't just do this in document ready? Since you're modifying the dom directly, your changes should be available immediately, so load() never fires because it's being set up after you've already added the code.

Upvotes: 2

Matt H
Matt H

Reputation: 6532

.load() is for loading data from a server. When you just .append() some HTML, it is ready immediately. Your load() function doesn't show an alert because it isn't loading anything.

Upvotes: 0

Related Questions