每当DIV第一次看到时,javascript – 加载(Lazy Loading)一个Div

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

就像Jquery Image加载http://www.appelsiini.net/projects/lazyload仅适用于图像。

我想做的内容(DIV的)。

假设我们有一个长的页面，那么我想下载div，因为它们变得可见。

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

所以，无论我们能不能找到这样的div，只能向下滚动。

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

任何帮助是赞赏。

解决方法

下面的代码不包括从底部移动的情况(见下面的patrick的评论)。此外，它会引发多个事件执行，由于几个简明的onscroll事件(大多数浏览器大多数时候都不会看到)。

$(document).ready(function(){
    $(window).scroll(function() {
        //check if your div is visible to user
        // CODE ONLY CHECKS VISIBILITY FROM TOP OF THE PAGE
        if ($(window).scrollTop() + $(window).height() >= $('#your_element').offset().top) {
            if(!$('#your_element').attr('loaded')) {
                //not in ajax.success due to multiple sroll events
                $('#your_element').attr('loaded',true);

                //ajax goes here
                //by theory,this code still may be called several times
            }
        }
    });
});

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