等待 jquery .html 方法完成渲染答案

【问题标题】：Wait for jquery .html method to finish rendering等待 jquery .html 方法完成渲染
【发布时间】：2015-10-28 16:44:44
【问题描述】：

我有带有垂直滚动条的 div。 Div 正在通过 ajax 动态更新，并使用 jQuery 的 .html 方法插入 html。 div 更新后，滚动条返回顶部，我试图将其保持在以前的位置。

这就是我正在尝试的方式：

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 后再继续？

【问题讨论】：

stackoverflow.com/questions/2030497/… 应该有帮助

标签： javascript jquery html

【解决方案1】：

这仍然是一个 hack，当 HTML 实际插入并准备好时确实没有可用的回调，但您可以检查 html_content 中的元素是否每 200 毫秒插入一次，以确保它们真的准备好了等。

检查来自 ajax 调用的 HTML 中的最后一个元素：

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

对于更高级的选项，您可以在没有间隔的情况下执行类似的操作，并将其绑定到 DOMnodeInserted，并检查是否插入了最后一个元素。

【讨论】：

谢谢，很遗憾没有这样的回调存在。
好吧，每次插入元素时都会触发原生 DOMNodeInserted 事件，您可以将函数绑定到该事件，以检查目标元素是否是最后一个元素ajax 调用，然后执行滚动操作，但它的效率可能会低于间隔时间，并且还存在一些跨浏览器问题。我只是去间隔，运行这样的间隔需要很少的资源，而且它可能会运行最大几次，检查每个插入的元素会更糟 IMO。

【解决方案2】：

我只想在这里指出一个区别：一件事是当 .html() 完成加载时，但浏览器实际呈现的内容是不同的。如果加载的内容有些复杂，例如表格、div、css 样式、图像等 - 渲染将在页面上出现的所有 dom 元素之后完成。检查是否一切都在那里，并不意味着渲染完成。我一直在自己寻找答案，因为现在我使用 setTimeout 函数。

【讨论】：

【解决方案3】：

这样的回调不存在，因为.html() 总是同步工作

【讨论】：

【解决方案4】：

如果您正在等待图片加载，有一种方法https://github.com/desandro/imagesloaded

【讨论】：