内容延迟加载

Question

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

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

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

 <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" /> 

我的问题是，对于<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个）

• “偏移”在开始时将为0，之后将在每次加载时更新，“结束”也将被计算，这两个参数将确定要切片的数组部分，该部分将附加到模板中在每个负载上。

• 对于初始加载，您可以在页面初始化时调用函数“ 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'); 在所有其他页面上（在初始化每个页面或在基础页面上）。