JQuery .load() wait until content is loaded

jquery

I want to make website pages sliding smothly one to another. So I've made $('a').click(); function that checks if link is local, and if is it gets a link href and loads it to body.

$('a').click(function(){
    var href=$(this).attr('href');  
    $('body').load(href);
    return false;
});

It look nice, but my site has also a lot of js plugins included. Executing them takes a while, and .load action first shows 'unchanged by js' content, and then exectues js. It causes bad flickr of content.

Is it possible to cache new content with all the exectuion of JS, dont change old body till it's done, and when all the DOM and JS is done on NEW content, slideOut old content and slideIn new one?

edit:I think the point is not about detecting js execution but about checking if all additional files are loaded – DOM changing should be fired at the same time that $(window).load of new file would be.

[edit]———————————————————————-

My solution for that was css code (css is loaded always before dom is build) that has cross-browser opacity 0.

.transparent{
    -moz-opacity: 0.00;
    opacity: 0.00;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    filter:alpha(opacity=0);
}

And it prevent from bad flickr of content usually but not always. Now its possible to detect somehow that content is loaded by jQuery ajax and apply some show timeout and so on. But in fact question is still open.

To make now a little more simple example for that question:

How to begin changing DOM after $('body').load('something.php') 3000ms after clicking the link that fire .load('something.php') function? (Loading should be started instantly after clicking, but DOM changing has to be initiated later)

Best Answer

Maybe you should use promises and try something like this:

$('a').click(function(){
    var href=$(this).attr('href');
    $('body').hide();
    $('body').load(href, function() {
      $('body').show();
    });
});
Related Topic