Question

我有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？

Answer 1

它仍然是一个黑客，并且实际上没有回调可用于实际插入和准备好HTML，但你可以检查html_content中的元素是否每200毫秒插入一次以确保它们真的准备等了。

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

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

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

Answer 2

我想在这里指出一个区别：有一点，就是当.html（）完成加载时，但浏览器实际呈现内容是不同的。如果加载的内容有点复杂，如表格，div，css样式，图像等等 - 渲染将比页面上所有dom元素稍晚完成。要检查是否所有内容都存在，并不意味着渲染完成。我一直在寻找这个问题的答案，因为现在我使用了setTimeout函数。

Answer 3

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

Answer 4

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

等待jquery .html方法完成渲染

4 个答案: