带.load的jQuery .html函数

Question

我使用jQuery的.html()函数加载HTML内容。我尝试加载的部分HTML内容是图片，需要一些时间才能加载。我做的是一个onclick事件，

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

我希望发生的是，当DOM加载完成后，我想让它淡入。如果它还没有完成，我希望它保持隐藏，因此，在HTML加载之前的fadeOut函数。

这可能吗？该方法似乎不适用于我。

Answer 1

首先，如果您要替换整个HTML元素，那么您可能只需完成一个完整的请求周期。这基本上就是你最终要做的事情，使用完整请求连接到窗口加载事件会比通过AJAX处理这个事件更容易。如果你没有更换整个页面，那么你的选择器就错了。其次，如果您只是加载DIV，那么您可以尝试隐藏DIV，将加载事件绑定到它，然后加载内容。有关更多信息，请参阅http://api.jquery.com/load-event/方法的注意事项。

$('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 
});