等待jquery .html方法完成渲染

我有垂直滾動條div。 Div通過ajax動態更新，並且使用jQuery的.html方法插入html。 div更新後，滾動條返回頂部，我試圖保持它在以前的位置。等待jquery .html方法完成渲染

這是我怎樣，我想它：

var scrollPos = $('div#some_id').scrollTop(); //remember scroll pos 
$.ajax({... 
    success: function(data) { 
     $('div#some_id').html(data.html_content); //insert html content 
     $('div#some_id').scrollTop(scrollPos); //restore scroll pos 
    } 
});

這種失敗。我最好的猜測是由於插入的html沒有呈現（即沒有滾動）而導致失敗。

例如，這個工程。

setTimeout(function(){ 
    $('div#some_id').scrollTop(scrollPos); 
}, 200);

但在我看來這是骯髒的黑客攻擊。我無法知道某些瀏覽器不會花費超過200毫秒的時間來渲染插入的內容。

有沒有辦法等待瀏覽器在繼續之前完成呈現插入的html？

來源

2012-05-20 Vladimir Cvetic

http://stackoverflow.com/questions/2030497/how-can-you-get-your-code-to-wait-for-html -and-append-functions-to-complete應該有幫助 – Dhiraj

它仍然是一個黑客，而實在是沒有可用的，當HTML實際插入並準備回調，但如果html_content元素插入每200ms，使您可以檢查確定他們真的是準備等

從Ajax調用檢查最後一個元素的HTML：

var timer = setInterval(function(){ 
    if ($("#lastElementFromAjaxID").length) { 
     $('div#some_id').scrollTop(scrollPos); 
     clearInterval(timer); 
    } 
}, 200);

對於你也許可以做這樣的事情沒有間隔更高級的選項，並將其綁定到DOMnodeInserted，並檢查最後一個元素插入。

來源

2012-05-20 13:13:43 adeneo

謝謝，很遺憾沒有這種回調存在。 –

嗯，每插入一個元素都會觸發本地[DOMNodeInserted]（http://help.dottoro.com/ljmcxjla.php）事件，您可以將一個函數綁定到該事件，該事件將檢查目標元素看看它是否是ajax調用的最後一個元素，然後執行滾動操作，但它的效率可能不如間隔，並且還存在一些跨瀏覽器問題。我只是爲了這個時間間隔，需要很少的資源來運行這樣的間隔，它可能會運行最多幾次，檢查每個插入的元素將會更糟糕的IMO。 – adeneo

這種回調並不存在，因爲.html()總是同步工作

來源

2013-04-03 13:21:37 danza

我只是想指出一個區別就在這裏：有一件事，就是當的.html（）已完成加載，但瀏覽器實際呈現的內容是不同的。如果加載的內容有點複雜，比如表格，div，css樣式，圖片等 - 渲染將比頁面上的所有目錄更早完成。要檢查一切是否存在，並不意味着渲染完成。我一直在尋找自己的答案，因爲現在我使用setTimeout函數。

來源

2013-05-23 12:02:09 olekeh

如果你正在等待加載圖像，還有一種方法https://github.com/desandro/imagesloaded

來源

2015-10-28 08:44:44 Feuda

等待jquery .html方法完成渲染

回答

相關問題