Javascript 仅对视口中的元素激发Ajax Rest调用

我有以下问题

我们使用一个模板生成一个div列表，所有div都具有相同的类等。 每个div都包含一个隐藏的输入字段，其中包含它链接到的目标站点的ID

现在，我的工作是使用这个ID为每个div生成ajax rest调用，以接收目标站点上的评论量

我当前的解决方案是一个简单的jQuery，遍历所有div，并为每个包含单个目标ID的div触发一个rest调用，然后在目标页面上追加注释数

但是，页面上可能有大量div，因此客户只希望在向下滚动页面时触发当前可查看div的其余调用

有没有办法做到这一点

重要信息：我必须使用jQuery 1.7，它必须在IE8中工作！--

问候

其他信息：

---

模板渲染的所有div都是可见的，因此我无法检查：可见。我需要一种方法来检查它们是否在视口中。我尝试了一些inview插件等，但它们需要一个特定的ID，然后检查是否有这个ID的元素进入视图。但是，我的所有元素都具有相同的类，并且完全没有ID，因为它们是由相同的模板呈现的。

您可以尝试使用

$（'.element'）。is（“：visible”）

---

不过我还没有在IE8中测试过它。

您必须获得每个元素的窗口位置和偏移顶部

$(document).ready(function(){
    var windowSize = $(window).height();
    console.log("Window size: " + windowSize);
    $(".test").each(function(){
        var top = $(this).offset().top; // element top position
        if(top < windowSize){
            console.log($(this));
            // your ajax call
        }
    });
});

$（文档）.ready（函数（）{
var windowSize=$（window.height（）；
console.log（“窗口大小：+windowSize”）；
$（“.test”）。每个（函数（）{
var top=$（this）.offset（）.top；//元素顶部位置
如果（顶部<窗口大小）{
log（$（this））；
//您的ajax调用
}
});
});

---

Finddle:

查看scroll事件，仅当div在范围内时进行ajax调用。模板呈现的所有div都是可见的，因此我无法检查：可见。我需要一种方法来检查它们是否在视口中。我尝试了一些inview插件等，但他们需要一个特定的ID，然后检查是否有这个ID的元素进入视图。但是，我的所有元素都具有相同的类，因为它们由相同的模板呈现。。。这应该通过你如何定位你的元素来实现。。。在这里摆弄一下，让我们看看你的代码。。。