带有.load的jQuery .html函数

Question

I am loading HTML content using jQuery's .html() function. Part of the HTML content I am trying to load are images, which take some time to be loaded. What I do is on an onclick event,

$('div').on('click',function() {
    $('html').fadeOut(1000)
        .html(content)
        .load(function() {
            $('html').fadeIn(1000)
        });
});

What I wanted to happen is that, when the DOM has finished loading, I want it to fadeIn. If it is still not finished, I want it to stay hidden hence, the fadeOut function before the html load.

Is this possible? That method doesn't seem to work for me.

Answer 1

First, if you are replacing the entire HTML element, you might as well just do a full request cycle. That's essentially what you're going to end up with and it will be easier to hook to the window load event using a full request than to handle this with AJAX. If you're not replacing the entire page, then you've got your selector wrong.

Second, if you are just loading the DIV, then you can try hiding the DIV, binding the load event to it, then loading it with content. See the caveats for the http://api.jquery.com/load-event/ method for more information.

$('div').on('click',function() {
    var $this = $(this); // save reference for future use
    $this.fadeOut(1000) // hide
         .load(function() { // hook up handler
             $this.fadeIn(1000)
         })
         .html(content);  // load content
});