帶有.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，將load事件綁定到它，然后再將其加載內容。 有關更多信息，請參見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
});