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 元素，您不妨只做一个完整的请求周期。这基本上就是您要结束的结果，使用完整请求 Hook 窗口加载事件比使用 AJAX 处理它更容易。如果您没有替换整个页面，那么您的选择器有误。

其次，如果您只是加载 DIV，那么您可以尝试隐藏 DIV，将加载事件绑定(bind)到它，然后加载内容。请参阅 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
});