javascript 等待 jquery .html 方法完成渲染
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10673603/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wait for jquery .html method to finish rendering
提问by Vladimir Cvetic
I have div with vertical scroll bar. Div is being updated dynamically via ajax and html is inserted using jQuery's .html method. After div is updated scroll bar returns to top and I am trying to keep it in the previous position.
我有带垂直滚动条的 div。Div 是通过 ajax 动态更新的，html 是使用 jQuery 的 .html 方法插入的。更新 div 后，滚动条返回顶部，我试图将其保持在以前的位置。
This is how I'm trying it:
这就是我尝试的方式：
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
}
});
This fails. My best guess is that it is failing due to inserted html not rendered (ie. no scroll).
这失败了。我最好的猜测是由于插入的 html 未呈现（即没有滚动）而失败。
For example this works.
例如这有效。
setTimeout(function(){
$('div#some_id').scrollTop(scrollPos);
}, 200);
But this is dirty hack in my opinion. I have no way of knowing that some browsers won't take more then these 200ms to render inserted content.
但在我看来，这是肮脏的黑客攻击。我无法知道某些浏览器不会花费超过这 200 毫秒来呈现插入的内容。
Is there a way to wait for browser to finish rendering inserted html before continuing ?
有没有办法在继续之前等待浏览器完成渲染插入的 html？
采纳答案by adeneo
It's still a hack, and there really is no callback available for when the HTML is actually inserted and ready, but you could check if the elements in html_contentis inserted every 200ms to make sure they really are ready etc.
它仍然是一个黑客，当 HTML 实际插入并准备好时，确实没有可用的回调，但是您可以检查是否html_content每 200 毫秒插入一次元素以确保它们真的准备好等。
Check the last element in the HTML from the ajax call:
从 ajax 调用检查 HTML 中的最后一个元素：
var timer = setInterval(function(){
if ($("#lastElementFromAjaxID").length) {
$('div#some_id').scrollTop(scrollPos);
clearInterval(timer);
}
}, 200);
For a more advanced option you could probably do something like this without the interval, and bind it to DOMnodeInserted, and check if the last element is inserted.
对于更高级的选项，您可以在没有间隔的情况下执行类似的操作，并将其绑定到 DOMnodeInserted，并检查是否插入了最后一个元素。
回答by olekeh
I will just like to point out one difference here: One thing, is when the .html() have completed loading, but the browser actually render the content is something different. If the loaded content is somewhat complex, like tables, divs, css styling, images, etc - the rendering will complete somewhat later than all the dom ellements are present on the page. To check if everything is there, does not mean the rendering is complete. I have been looking for an answer to this by myself, as now I use the setTimeout function.
我只想在这里指出一个不同之处：一件事是，当 .html() 完成加载时，但浏览器实际呈现的内容却有所不同。如果加载的内容有些复杂，如表格、div、css 样式、图像等 - 渲染将在页面上出现所有 dom 元素之后完成。检查是否一切都在那里，并不意味着渲染完成。我一直在自己寻找答案，因为现在我使用 setTimeout 函数。
回答by Feuda
If you are waiting for images loading, there's one approach https://github.com/desandro/imagesloaded
如果您正在等待图像加载，有一种方法https://github.com/desandro/imagesloaded
回答by danza
Such callback does not exists because .html()always works synchronously
这种回调不存在，因为.html()总是同步工作
