jquery .load( ) and trigger function AFTER new content loads? just like JavaScript onload event

Question

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:

• Using a callback function as in $('#object').load(url, callback) triggers as soon as .load() function successfully executes (before the content is actually loaded). Useless here.
• Using a timed delay for fading back in is not a graceful solution. Very "clunky", especially for those with faster Internet connectivity.
• JavaScript's onload event trigger does not work, as the element that .load() is altering has already loaded into the HTML DOM.
• jquery's .ready() function also does not work, as the actual element is already loaded.
• I do not want to create an 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.

• Once the .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".
• The .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

Answer 1

Try using a different method rather than load(), I would suggesting using get(). Something like this may be more useful to you...

var jqxhr = jQuery.get(url,vars);

jqxhr.success(function(data){
    # This will only be called once the remote content has been loaded in
    # The data will then be stored in the data param and can be used within your site
});

jqxhr.error(function(data){
    # Something went wrong, never mind lets just handle it gracefully below...
});

I hope this is a solution to your problem!

For more information see http://api.jquery.com/jQuery.get/

I have quickly created this function below that may be of help to you... its not refined!

jQuery.fn.loadNewData = function() {

    var object = jQuery(this);
    var jqxhr = jQuery.get(arguments[0]);

    // check for success
    jqxhr.success(function(data) {
        // load the data in
        object.html(data);
    });

    jqxhr.error(function(){
        alert('Failed to load data');
    });
}

Using this you can call how similarly to how you would call the load() function.

jQuery('#object').loadNewData(url);