javascript - 每当 DIV 第一次可见时加载(延迟加载)Div

Question

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

就像Jquery图片加载http://www.appelsiini.net/projects/lazyload仅对图像有效。

我想为内容(DIV)执行此操作。

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

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

那么我们是否能以某种方式发现 div 仅向下滚动才可见。

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

感谢任何帮助。

Answer 1

我一直在寻找这个，以便仅在广告可见时从我的 openX 服务器加载广告。我正在使用 openX 的 iFrame 版本，它加载在 div 中。这里的答案让我走上了解决这个问题的道路，但发布的解决方案有点太简单了。首先，当页面不是从顶部加载时(如果用户通过单击“后退”进入页面)，则不会加载任何 div。所以你需要这样的东西:

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

此外，您还需要知道什么定义了可见的 div。这可以是完全可见或部分可见的 div。如果对象的底部大于或等于窗口的顶部并且对象的顶部小于或等于窗口的底部，则它应该是可见的(或者在本例中:已加载)。您的函数 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);
      }
   });
}

我在所有主要浏览器甚至我的 iPhone 上对此进行了测试。它就像一个魅力!