帶.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 
});