每当Div第一次可见时加载(惰性加载) DIV
我想为我的网站内容启用延迟加载。
就像Jquery Image加载http://www.appelsiini.net/projects/lazyload一样，它只对图像有效。
我想做的是内容(DIV的)。
假设我们有一个很长的页面，然后我想在它们变得可见时下载div。
我将使用JSON或PageMethods下载内容。但是我想要执行加载内容的函数的代码。
所以我们是否能以某种方式找到这个，div是可见的，只能向下滚动。
意味着我需要使用一些滚动事件，但不知道如何使用。
任何帮助都是非常感谢的。
回答 2
Stack Overflow用户
发布于 2012-04-18 22:30:24
我正在寻找这一点，以便仅当广告应该可见时才从我的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上也是如此。它就像一个护身符！！
Stack Overflow用户
发布于 2015-10-13 19:22:22
您可以考虑使用way point库:)
http://imakewebthings.com/waypoints/api/waypoint/
它的用例和api在上面的链接中定义
压缩时为9kb。在3g/ 4g上加载页面时，会额外增加-100毫秒-50毫秒的时间延迟
编辑:-它可以独立使用，也支持所有主要的框架。
https://stackoverflow.com/questions/8192651
复制相似问题