Question

想法是在可见显示区域附近加载ex：<div>内容。

例如，我可以使用图像执行此操作：

＆＃13;

$(function() {
  $("img.lazy").lazyload({
    effect: "fadeIn",
    threshold : 200
  });
});

＆＃13;

<script src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<img class="lazy" data-original="http://www.aripaev.ee/storyimage/EA/20150529/NEWS/150529839/AR/0/Ainar-Sulumets.jpg&ExactW=640&ExactH=420&Q=95" width="450" height="280" />
<img class="lazy" data-original="http://www.dumpaday.com/wp-content/uploads/2015/05/pictures-1106-700x280.jpg" width="450" height="280" />
<img class="lazy" data-original="http://www.dumpaday.com/wp-content/uploads/2015/05/thumb37-700x280.jpg" width="450" height="280" />
<img class="lazy" data-original="http://www.dumpaday.com/wp-content/uploads/2015/05/160-700x280.jpg" width="450" height="280" />
<img class="lazy" data-original="http://www.dumpaday.com/wp-content/uploads/2015/05/fun-facts-1-700x280.jpg" width="450" height="280" />
<img class="lazy" data-original="http://www.dumpaday.com/wp-content/uploads/2015/05/pictures-1105-700x280.jpg" width="450" height="280" />

＆＃13;

我的问题是，为<div>及其内容执行此操作的最简洁方法是什么？

编辑：

我可以自己编写临时解决方案，这样可行，但我希望现有的lib。

        var $myElt = $('#item');
        var $window = $(window);
        var myTop = $myElt.offset().top;
        var myBot = myTop + myElt.height();
        var windowTop = $window.scrollTop();
        var windowBottom = windowTop + $window.height();

        if ((myTop > windowTop && myTop < windowBottom) 
        || (myBot > windowTop && myBot < windowBottom)) {
           //load item

Answer 1

假设您正在使用jQuery lazyload插件，插件中有一个选项，我们可以在其中创建一个锚元素，其中一个类的href等于将加载下一个内容的URL。这个锚元素将位于容器的末尾，当锚点进入视口时，将触发加载下一个内容的ajax调用。

我过去曾使用它，但我不记得确切的语法。

Answer 2

我认为，为了获得更好的性能，如果在没有第三方库的情况下实现它会更好。例如，如果您将“this.images_queue”作为图像对象数组，那么可能的解决方案就是：

将滚动条绑定到窗口
选择滚动百分比以在超出滚动百分比时加载内容。（百分比看起来是静态的，但是当延迟滚动时滚动条的长度会增加，所以它会很平滑动态）
如果最初渲染的图像（这里我选择了12）
选择滚动时附加的图片数量（此处我选择了4张）
“offset”在开始时将为0，之后它将在每次加载时更新，“end”也将被计算，这两个参数将确定要切片的数组部分，部分将在每次加载时附加到模板。
对于初始加载，您可以在页面初始化时调用函数“loadMore”：

这是一个可能的例子（使用BackboneJS），但通常它是合适的：

var self = this;
this.offset = 0;
$(window).bind('scroll', function(ev) {
self.loadMore(ev);
});
loadMore: function() {
    var s = $(window).scrollTop(),
        d = $(document).height(),
        c = $(window).height();
    var scrollPercent = (s / (d - c)) * 100; // The percent of the scroll
        if (this.offset < this.images_queue.length && (this.offset == 0 || scrollPercent >= 70)) { // For firefox you can find the scroll bar scrolled on reload while offset=0
        var end = 0;
        if (this.offset == 0) {
            end = Math.min(12, this.images_queue.length);
        } //the min is used in case (12) exceeds the images_queue boundary
            else {
            end = Math.min(this.offset + 4, this.images_queue.length);
        } //the min is used in case (offset + 4) exceeds the images_queue boundary
            data = this.images_queue.slice(this.offset, end)
        var some_images = "";
        for (i = 0; i < data.length; i++) {
            var x = '<img class="lazy" data-original="' + data[i].image_url + '" width="450" height="280" />'
            some_images = some_images + x + '\n'; //normally works '\n'
        }
$(".divContainingImages").append(some_images); //Append the images from the sliced array
        this.offset = end;
    } //end if
} //end loadmore fun

注意：您必须在所有其他页面上从窗口$(window).unbind('scroll');进行UNBIND滚动（在初始化每个页面时或在基页上，如果有的话）。

内容延迟加载

编辑：

2 个答案: