Using jquery, I am swapping some content in a web page by use of jquery's .load()
function. I want to trigger an event immediately once the content has actually been loaded, but not before and not after. I'm up for any graceful solution! Why? In this instance, I'm doing the old "fade out, swap content, fade in" approach. My problem? I want to fade back in AS SOON AS the new content is loaded.
Caveats:
$('#object').load(url, callback)
triggers as soon as .load()
function successfully executes (before the content is actually loaded). Useless here.onload
event trigger does not work, as the element that .load()
is altering has already loaded into the HTML DOM..ready()
function also does not work, as the actual element is already loaded.onload
or .ready()
sub-container element, because that's a workaround for what I'm actually trying, though it might be as graceful or more.How can I fire a function when (and only when) the new .load()
content is finally loaded, just like JavaScript's onload
event does? Thanks much.
EDIT As it turns out, the jquery .load()
function is working flawlessly, and I'm approaching this wrong.
.load()
function completes successfully, it calls any "callback" function included by the programmer, just like any other jquery function that accepts a callback as one of its "arguments"..load()
function is complete once it either errors or successfully begins the HTML replacement and loading of new content, but that is IT! The content will then take however long it takes to load, but your .load
call is already complete before that. Therefore, expecting the callback to run after the .load
content has loaded will only disappoint you. ;)I hope others can learn from this just as I did, including those who thought what I thought was the case. Proof: as stated in the jquery ajax .load page, the callback is executed when the request completes, not when the load completes. Eureka. Whoops. /EDIT
Upon reading the jQuery docs pages for jQuery.get() and jQuery.load(), the callback argument is quoted as the following:
"A callback function that is executed if the request succeeds."
Let me stress the terms "request" and "succeeds". The request may succeed, but that does not mean that the content is loaded. Same problem as .load()
— the functions aren't built the way I was thinking.
If I want to trigger an event once the new content finally loads, I'll need to take a different approach.
onload
event, and trigger it by completely replacing an HTML element (having the replaced code contain an onload
property). EDIT: Note that using HTML iframe
elements is pretty awful, primitive, and "clunky". I just need to find a better way to trigger a function as soon as loading the new content finishes..ready()
state of new content, but ("AFAIK" / as far as I know) that will only work if the checked content is a new HTML element, not a preexisting HTML element whose interior content is changed. The jQuery .ready()
status of any preexisting element will (AFAIK) already be shown as "ready" despite if new content is loading. Perhaps I am wrong about this, and I would like to be corrected if so.Unless otherwise notified, this answer will be marked as the correct one. The original question was mistaken that .load()
was all I needed. Cheers!