在div中加載jQuery ajax內容，事件就緒

我使用jQuery Ajax動態加載頁面中的內容。內容包含圖像，所以我需要知道所有圖像將在什麼時候加載，如DOM Ready。在div中加載jQuery ajax內容，事件就緒

最初的內容將被隱藏。圖像加載成功後，我顯示包含它們的div。有沒有一種方法可以檢測何時可以顯示帶有Ajax的加載內容？ Ajax success函數在從服務器返回文本響應時被調用，但是當所有文件都被加載並且圖像被加載時，我需要執行一個函數。

來源

2014-03-26 SpartakusMd

完成後，目前還不清楚你問什麼。你在問什麼時候你通過Ajax請求的內容已經被返回，或者你問的是什麼時候你插入到你的文檔中的圖像全部被加載了？ – jfriend00

我在詢問何時已插入到我的文檔中的圖像全部加載。 – SpartakusMd

請編輯您的問題，以便更清楚地瞭解這一點。 – jfriend00

如果您剛剛插入一堆HTML到您的文檔（包含一些<img>標籤），你想知道什麼時候所有這些新的圖像加載，你可以不喜歡它這個。假設動態內容全部插入到#root對象中。您插入右後動態抗衡，您可以運行此代碼：

function notifyWhenImagesLoaded(rootSelector, callback) { 
    var imageList = $(rootSelector + " img"); 
    var imagesRemaining = imageList.length; 

    function checkDone() { 
     if (imagesRemaining === 0) { 
      callback() 
     } 
    } 

    imageList.each(function() { 
     // if the image is already loaded, just count it 
     if (this.complete) { 
      --imagesRemaining; 
     } else { 
      // not loaded yet, add an event handler so we get notified 
      // when it finishes loading 
      $(this).load(function() { 
       --imagesRemaining; 
       checkDone(); 
      }); 
     } 
    }); 
    checkDone(); 
} 

notifyWhenImagesLoaded("#root", function() { 
    // put your code here to run when all the images are loaded 
});

你調用這個函數你插入動態內容之後。它會查找動態內容中的所有圖像標籤，並檢查是否有已加載的圖像。如果他們有，那就算他們。如果他們沒有，那麼它會安裝一個加載事件處理程序，以便在圖像加載時得到通知。當最後一張圖片加載完成後，它會調用回調。

來源

2014-03-26 08:03:14 jfriend00

AJAX

$.ajax({ 
    type: "POST", 
    url: "myfile.*", 
    data: {data : params}, 
    cache: false, 
    success: function(return_data){ 
     //here you have the answer to Ajax 
     //at this point you have the content ready for use 
     //in your case here you would find the images that you got back from the file called by ajax 
    } 
});

來源

2014-03-26 07:45:10 WhiteLine

當它觸發事件成功意味着該文件被回叫請求的數據，因此準備好使用。也許我誤解了這個問題 – WhiteLine

這個問題還不清楚。我發佈了一條評論，要求澄清。你的回答只是顯示了一個典型的ajax調用。 OP顯然希望在動態加載的內容中與圖像相關的內容，但並不完全清楚他們想要什麼。 – jfriend00

@ jfriend00，我知道如何進行Ajax調用。我需要一個像DOM Ready這樣的事件。 – SpartakusMd

您可以使用帶負載的on方法。計算總共有多少項目，並使用加載事件來加載多個圖像。你甚至可以像這樣建立一個進度條。

類似的東西，你已經與Ajax調用

$('img').on('load', function(){ 

    // Count items here  

});

來源

2014-03-26 08:13:17 MentalRay

在div中加載jQuery ajax內容，事件就緒

回答

相關問題