为什么加载后无法正确测量通过AJAX无限滚动加载的内容的高度？

Question

我正在加载帖子组成的图片或视频到我的网站的主div与无限滚动（通过AJAX实施）。该系统的工作原理与任何流行的meme网站非常相似。

问题：每个帖子左侧都有一个正文部分，右侧有一个社交按钮容器。当用户滚动时，我希望社交按钮容器沿着帖子正文移动，并停在父div底部，以便他们在帖子底部可以喜欢它。问题是，一些通过我的AJAX滚动函数加载的帖子似乎没有正确计算父母身高，并且他们要么永远不会移动或直接跳到父div的底部，当浏览器窗口的顶部到达他们时。想要的行为的Here is a visual illustration。

执行：我无法编译一个工作的jsFiddle，它可以模拟AJAX请求的加载图像和视频与“滚动”调用相结合的行为。这是我的实现和调试的企图：

每篇文章的结构如下：

<div class="article-container"> 
    <div class="article-body-left"><img src="..."></div> 
    <div class="social-buttons-right"> 
     <div class="facebook-button">...</div> 
    </div> 
</div> 

每个AJAX请求完成后，我尝试使用的“滚动”，以确定每个社交按钮集装箱位置和修改它们使用ajaxComplete（）的用户滚动：

$(document).ajaxComplete(function() { 
    bind_sticky_boxes(); 
}); 

function bind_sticky_boxes() { 
    $(window).on('scroll', function() { 
    $('.social-buttons-right').not('.following').each(function() { 
     var element = $(this).addClass('following'), 
     originalY = element.offset().top, 
     parent_offset = element.parent().offset().top, 
     parent_height = element.parent().height(), 
     element_height = element.height(), 
     destination = originalY+parent_height-element.height() -10; 

      $(window).on('scroll', function(event) { 
       var scrollTop = $(window).scrollTop(); 
       if (scrollTop > originalY - 10){ 
       element.css('position','absolute'); 
       element.css('top',(scrollTop - parent_offset + 10) + 'px'); 
       element.css('right', '0px'); 
       if (scrollTop > (destination -10)) { 
         element.css('top',parent_height-element_height); 
         element.css('right', '0px'); 
         element.css('bottom', '0px'); 
       } 
       } else { 
       element.css('position','relative'); 
       element.css('top','initial'); 
       element.css('left', 'initial'); 
       element.css('right','initial'); 
       element.css('bottom', 'initial'); 
       } 
      }); 
    }); 
    }); 
} 

调试及注意事项：滚动功能第一AJAX请求后工作正常，但事后有点打破一些.social-buttons-right不要沿着文章正文或在网站滚动期间直接跳到父div的底部。

当我检查发现行为不当的元素时，他们都具有“.following”，这意味着滚动函数已找到它们，但它们也得到了bind_sticky_boxes给它们的css属性的混合。我使用requestanimationframe（）稍等一下，然后用setTimeout（function（）{..}，2000）来触发这个事件甚至更晚滚动绑定。这些都没有解决问题（后者不是解决方案）。我也试图尽快触发AJAX请求，但由于某种原因，这似乎有更糟的效果。

更新：我现在确信问题与父母身高计算有关。我将css属性换成具有相同属性的独特类，并注意到行为异常元素的类更改几乎总是发生在父div的开始处，我认为这是一个强烈的迹象，表明它的高度不会在正确计算后正确计算将它附加到主div。

关于我的无限滚动。我不包括整个AJAX，因为我不认为它与问题严格相关。但我这样的内容添加到主div：

success: function(response){ 
      if (max_page >= paged){ 
       $('#page').append(response.content); 
      } else{ 
       has_content = false; 
      } 
      loading = false; 
      } 

页面完成加载后，我启动我的无限滚动。当用户到达具有编号为的元素时，AJAX请求触发，该元素加载更多帖子，它位于主包装器下方。

$(window).on('load',function(){ 
$(window).on('scroll', function() { 
     var element_position = $('#load-more-posts').offset().top + $('#load-more-posts').outerHeight() - window.innerHeight; 
     var y_scroll_pos = $(window).scrollTop(); 
     if((y_scroll_pos >= element_position) && !loading) { 
      paged++; 
      load_more_posts(); 
     } 
    });  

}）;

Answer 1

问题是，目前各种高度/位置属性的计算被绑定到滚动事件，在通过AJAX附加的图像被加载并且因此会被不正确计算之前，滚动事件可能会被触发。为了解决这个问题，我必须将它绑定到加载事件，以确保图像准备好使用。

$('.article-body-left img').one('load', function() { 
    var element = $(this).parent().parent().find('.social-buttons-right'), 
    originalY = element.offset().top, 
    parent_offset = element.parent().offset().top, 
    parent_height = element.parent().height(), 
    element_height = element.height(), 
    destination = parent_offset+parent_height-element.height() -10; 
    //alert("Element offset: "+originalY+"\nParent offset: "+parent_offset+"\nParent height: "+parent_height+"\nElement height: "+element_height+"\nDestination: "+destination); 
     $(window).on('scroll', function(event) { 
      var scrollTop = $(window).scrollTop(); 
      if (scrollTop > originalY - 10){ 
      element.removeClass('above').removeClass('below').addClass('along'); 
      element.css('top',(parseInt(scrollTop - parent_offset + 10)) + 'px'); 
      if (scrollTop > (destination -10)) { 
        element.removeClass('above').removeClass('along').addClass('below'); 
        element.css('top',''); 
      } 
      } else { 
      element.removeClass('below').removeClass('along').addClass('above'); 
      element.css('top',''); 
      } 
     }); 
}).each(function() { 
    if(this.complete) $(this).load(); 
}); 

CSS：

.along{ 
    position: absolute; 
    right : 0px; 
} 

.below{ 
    position: absolute; 
    right: 0px; 
    bottom: 0px; 
} 
.above{ 
    position: relative; 
}