Question

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

就像加载http://www.appelsiini.net/projects/lazyload的Jquery Image只对图像有效。

我想为内容（DIV）做这件事。

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

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

因此，我们是否能够以某种方式发现div只能向下滚动显示。

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

感谢任何帮助。

Answer 1

我一直在寻找这个，只有在广告应该可见时才从我的openX服务器加载广告。我使用的是加载在div中的openX的iFrame版本。这里的答案让我开始解决这个问题，但是发布的解决方案有点过于简单了。首先，当页面未从顶部加载时（如果用户通过单击＆＃39;返回＆＃39;进入页面），则不会加载任何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上都测试了这个。它就像一个魅力!!

Answer 2

以下代码不包括用户从底部向上滚动的情况（请参阅下面的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
                //in theory, this code still may be called several times
            }
        }
    });
});

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

Answer 3

你可以考虑方式点库：）

http://imakewebthings.com/waypoints/api/waypoint/

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

压缩时为9 kb。在3g / 4g

上加载页面时，它会额外增加-100 ms- 50ms timelag

编辑： - 它可以单独使用，也支持所有主要框架。

Answer 4

这是一个延迟加载图像的解决方案，当它们在500px视图范围内时。它可以适用于加载其他类型的内容。图像本身具有属性data-lazy="http://..."，其中包含图像网址，然后我们只为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);

我使用的去抖功能如下：

function debounce(func, wait, immediate) {
    var timeout;
    return function () {
        var context = this, args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            timeout = null;
            if (!immediate) func.apply(context, args);
        }, wait);
        if (immediate && !timeout) func.apply(context, args);
    };
}

你需要记住，这在iOS上并不是非常有效，因为滚动事件在用户完成滚动之后之前不会触发，到时为止已经看过空白的内容了。

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

4 个答案: