Javascript 每当Div第一次可见时加载（延迟加载）Div

我想为我的网站内容启用延迟加载

就像Jquery图像加载一样，它只对图像有效

我想做的内容（DIV的）

假设我们有一个很长的页面，那么我想在看到div时下载它

我将使用JSON或PageMethods下载内容。但是我想要执行加载内容的函数的代码

所以我们是否能找到div只在向下滚动时可见

意味着我需要使用一些滚动事件，但不知道如何使用

---

感谢您的帮助。

下面的代码不包括用户从底部向上滚动的情况（请阅读下面的patrick评论）。此外，由于多个并发的

onscroll

事件，它允许执行多个事件（在大多数浏览器中，大多数情况下，您不会看到这种情况）

---

正确的解决方案，它考虑了从底部滚动。

我一直在寻找这样的解决方案，以便仅当广告应该可见时才从我的openX服务器加载广告。我使用的是加载在div中的openX的iFrame版本。这里的答案让我开始解决这个问题，但是发布的解决方案有点太简单了。首先，当页面没有从顶部加载时（如果用户通过单击“后退”进入页面），没有加载任何div。所以你需要这样的东西：

$(document).ready(function(){
   $(window).scroll(lazyload);
   lazyload();
});

function lazyload(){
   var wt = $(window).scrollTop();    //* top of the window
   var wb = wt + $(window).height();  //* bottom of the window

   $(".ads").each(function(){
      var ot = $(this).offset().top;  //* top of object (i.e. advertising div)
      var ob = ot + $(this).height(); //* bottom of object

      if(!$(this).attr("loaded") && wt<=ob && wb >= ot){
         $(this).html("here goes the iframe definition");
         $(this).attr("loaded",true);
      }
   });
}

此外，您还需要知道什么定义了可见div。它可以是完全可见或部分可见的div。如果对象的底部大于或等于窗口的顶部，并且对象的顶部小于或等于窗口的底部，则该对象应可见（或者在本例中：已加载）。您的函数

lazyload（）

可能如下所示：

$(document).ready(function(){
   $(window).scroll(lazyload);
   lazyload();
});

function lazyload(){
   var wt = $(window).scrollTop();    //* top of the window
   var wb = wt + $(window).height();  //* bottom of the window

   $(".ads").each(function(){
      var ot = $(this).offset().top;  //* top of object (i.e. advertising div)
      var ob = ot + $(this).height(); //* bottom of object

      if(!$(this).attr("loaded") && wt<=ob && wb >= ot){
         $(this).html("here goes the iframe definition");
         $(this).attr("loaded",true);
      }
   });
}

函数lazyload（）{
var wt=$（窗口）.scrollTop（）；//*窗口顶部
var wb=wt+$（窗口）.height（）；//*窗口底部
$（“.ads”）。每个（函数（）{
var ot=$（this.offset（）.top；//*对象顶部（即广告div）
var ob=ot+$（this）.height（）；//*对象底部
如果（！$（此）.attr（“已加载”）和&wt=ot）{
$（this.html（“iframe定义在这里”）；
$（this.attr（“已加载”，true）；
}
});
}

---

我在所有主流浏览器上，甚至在我的iPhone上都进行了测试。它就像一个符咒

这里有一个解决方案，当图像在500px范围内时，可以延迟加载它们。它可以适应于加载其他类型的内容。图像本身有一个属性

data lazy=”http://...“

中包含图像url，然后我们只为

src

属性放置一个虚拟透明图像

var pixelLoadOffset = 500;
var debouncedScroll = debounce(function () {
    var els = app.getSelector(el, 'img[data-lazy]');
    if (!els.length) {
        $(window).unbind('scroll', debouncedScroll);
        return;
    }
    var wt = $(window).scrollTop();    //* top of the window
    var wb = wt + $(window).height();  //* bottom of the window

    els.each(function () {
        var $this = $(this);
        var ot = $this.offset().top;  //* top of object
        var ob = ot + $this.height(); //* bottom of object
        if (wt <= ob + pixelLoadOffset && wb >= ot - pixelLoadOffset) {
            $this.attr('src', $this.attr('data-lazy')).removeAttr('data-lazy');
        }
    });
}, 100);
$(window).bind('scroll', debouncedScroll);

---

你需要记住，iOS在iOS上并不是非常有效，因为滚动事件直到用户完成滚动之后才启动，这时他们已经看到了空白内容。

你可以考虑路径点库：

它的用例和api在上面的链接中定义

压缩时，它的大小为9KB。在3g/4g上加载页面时，它将额外增加一个-100毫秒-50毫秒的时间间隔

编辑：-

---

它可以独立使用，也支持所有主要框架。

您的页面有多长，这是一个理想的功能？作为一个用户，我觉得这很烦人，因为当页面加载时，滚动条会给出页面长度的视觉指示，但是如果你在我滚动的过程中不断加载更多的内容，那么页面就会越来越长。@nnnnnn实际上，当我们在页面ex（RSS提要）中有太多的动态内容时，会发生这种情况来自其他div的内容在这种情况下，我只想在用户实际看到div时使用JSON etc加载该div。Vanilla js现在包含用于处理该div的IntersectionObserver:API。比使用滚动事件要好得多。但是请注意，从2017年11月8日起，IE11和safari仍然不受支持，这解决了我的问题，但当你滚动到下一个向下的div时，它会继续命中向上div的函数。例如，如果我们有十个div，那么它上面的所有div都会被这个函数命中好的，这是一个小问题。在我的答案中添加了attr check。你可以通过使用一些全局对象而不是属性来优化它。不是为了提升我自己的帖子，但是这个解决方案有一个问题。它只在从页面顶部向下滚动时起作用。如果用户访问某个链接并单击页面下方的某个位置“返回”，屏幕上的所有内容仍会加载。查看下面的帖子。与Oroboros的基本相同，确定可见性的方法略有不同。你能提供一把小提琴吗？我得到的不是显示的内容，而是“iframe定义”。我是网络开发新手，所以如果你指出我做错了什么，这将非常有帮助。。。您需要将其替换为等（因此，将其设置为：$（this）.html（“事实上，您可以将其用于所有类型的内容，而不仅仅是iframe。您还可以将图像定义放在其中：$（this）.html（“”）等…具有创造性；-）虽然这会起作用，但它的效率很低，因为即使在图像加载后，您仍要继续计算偏移量等。理想情况下，您应该在加载后解除滚动事件的绑定。您能提供一个提琴吗？虽然我可能不得不怀疑您的100ms滞后统计数据，但waypoint是一个相当不错的库。但现在，互联网在全世界范围内都得到了高度改进ld，所以9kb不是什么大问题，所以干杯……。@RavinderPayal考虑到目前3G的平均速度似乎在5-7Mb左右，这是我在任何地图上都能找到的最低速度（印度，2007）是1Mbps，9kb应该会增加完全没有加载的时间。根据维基百科，1990年代的拨号速度约为220kbps，加载时间约为41毫秒。你使用什么样的互联网？@PopeyGilbert metros（印度）的互联网平均速度为每秒2兆比特。每小时约为每秒250千字节