是否有類似`$（window）.load（）;`在新插入的Ajax內容加載完成後執行一個函數？

在我做了一個像$(element).load(url, callback);這樣簡單的事情發出ajax請求後，頁面上會有新的內容，包括圖像等。

新內容加載完成後，有沒有辦法類似$(window).load(callback)？

$(window).load();當頁面新鮮時可以很好地工作，以便您可以顯示加載動畫，直到加載所有內容爲止，但在$(window).load()已被觸發後加載內容時，似乎沒有這樣簡單的內容。

編輯6/6/12 11:55 pm：我想每個人都會誤解我的問題。讓我更好地解釋一下：

當你第一次加載一個頁面時，你可以利用這兩個事件與jQuery：$(document).ready();和$(window).load();。第一個在DOM準備就緒時觸發，第二個在內容加載完成時觸發（圖像等）。在使用jQuery的方法更新頁面之後，我完全意識到我可以傳遞一個回調以在Ajax完成後執行。

那就是不是我想要什麼。我想在新內容完成加載後執行一項功能，類似於在頁面初始內容加載完成後觸發$(window).load();。

這有道理嗎？我們如何創建一個類似於$(window).load();的事件來完成加載Ajax的內容後（而不是，剛插入HTML後）呢？

來源

2012-06-06 trusktr

你只是想在ajax調用期間顯示「loading ...」嗎？ –

我最近嘗試了相同的，但它不工作，而不是選擇div並把你的新的HTML內容，它是替代 –

@RayCheng請看我更新的問題。 – trusktr

根據jQuery的：

負載事件被髮送到一個元件時，它和所有的子元件已經完全加載。這個事件可以發送到與URL相關的任何元素：圖像，腳本，框架，iframe和窗口對象。

所以，DOM更新後（與Ajax'ed內容爲例），我設置一個監聽器上的所有新插入的圖像的「負荷」事件：

function when_images_loaded($img_container, callback) { // do callback when images in $img_container (jQuery object) are loaded. Only works when ALL images in $img_container are newly inserted images and this function is called immediately after images are inserted into the target. 
    var _imgs = $img_container.find('img'), 
     img_length = _imgs.length, 
     img_load_cntr = 0; 

    if (img_length) { //if the $img_container contains new images. 
     _imgs.on('load', function() { //then we avoid the callback until images are loaded 
      img_load_cntr++; 
      if (img_load_cntr == img_length) { 
       callback(); 
      } 
     }); 
    } 
    else { //otherwise just do the main callback action if there's no images in $img_container. 
     callback(); 
    } 
}

這是在圖像準備好之前允許內容保持隱藏狀態非常好。如果你有背景圖像，將顯示爲背景圖像，這是行不通的。解決方法是將您在CSS樣式中使用的所有圖像加載到保持隱藏狀態的容器中，以便上述功能允許您加載圖像。一旦加載了所有圖像，就可以刪除包含僅用於CSS的圖像的元素，這樣瀏覽器會在您取消隱藏內容時立即渲染背景（等）。

來源

2012-06-12 07:34:26 trusktr

我想你沒有。您只需觸發ajax完成後將執行的成功ajax事件。這對你來說已經足夠了。對於由ajax返回的特定元素，您不需要像.load（）這樣的事件。但是你可以嘗試加載（）事件附加到元素，比如HTML是由服務器返回之後，但在它插入到DOM

來源

2012-06-06 05:26:21 odiszapc

請參閱我更新的問題。你能提供一個附加這些加載事件的例子嗎？ – trusktr

$(element).load(url, function(){ 
    //this code is executed after the page is loaded 
})

這是什麼意思？

來源

2012-06-06 05:31:17

這不是我的意思。不過謝謝。我更新了我的問題以更好地解釋我的意思。 – trusktr

聽起來你正在尋找一種全局方法來處理所有ajax完成事件。你可以這樣做。

$(document).ready(function() { 
    $(document).ajaxComplete(function() { alert('ajax completed.') }); 
    $('#d').load("url-to-page", function (response, status, xhr) { 
     if (status == "error") { 
      var msg = "Sorry but there was an error: "; 
      alert(msg + xhr.status + " " + xhr.statusText); 
     } 
    }); 
});

來源

2012-06-06 05:58:18

這是一個有趣的提示。謝謝。但是，這並不是我正在尋找的。我更新了我的問題以更好地解釋我的意思。 – trusktr

前幾天我偶然發現了這個問題，並且在當時使用了你的問題的答案，但自從偶然發現了imagesLoaded插件，可能對未來的其他人有所幫助。

來源

2016-04-27 21:33:55 Andrew

是否有類似`$（window）.load（）;`在新插入的Ajax內容加載完成後執行一個函數？

回答

相關問題