javascript - 带有 .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
});