jQuery懒加载DIV中的内容

Question

我想要在 div 中加载内容。我找到了很多 jQuery 滚动插件，但它们都是用于整个页面的加载。当滚动到 div 底部时，我想要在现有的 div 中加载内容。有人能帮忙吗？

- ZOE RULE

Answer 1

您可以使用JQuery和Ajax来实现以下操作：

var loading = false;//to prevent duplicate

function loadNewContent(){       
    $.ajax({
        type:'GET',
        url: url_to_new_content    
        success:function(data){
            if(data != ""){
                loading = false;
                $("#div-to-update").html(data);
            }
        }
    });
}

//scroll DIV's Bottom 
$('#div-to-update').on('scroll', function() {
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
        if(!loading){
            loading = true;
            loadNewContent();//call function to load content when scroll reachs DIV bottom                
        }   
    }
})


//scroll to PAGE's bottom
var winTop = $(window).scrollTop();
var docHeight = $(document).height();
var winHeight = $(window).height();
if  ((winTop / (docHeight - winHeight)) > 0.95) {       
    if(!loading){
        loading = true;
        loadNewContent();//call function to load content when scroll reachs PAGE bottom                
    }       
}

FIDDLE

- Merlin

---

我不想要页面底部的滚动条。我想要在 div 中滚动，并且希望将内容加载到 div 中而不是整个页面上。 - ZOE RULE

$("#div-to-update").html(data); 将内容加载到 DIV 中。我已经更新了 DIV 滚动的代码。 - Merlin

非常感谢，这节省了我很多时间。非常感谢。 - ZOE RULE

很高兴能帮到你。 - Merlin

请保持联系。 - ZOE RULE

我无法让 .on 触发。我正在尝试使用 waypoints.js 来触发它。 - Ben Racicot

Answer 2

你可以使用JQuery和这个lazyload插件来实现类似以下的效果。

你的div：

<div data-src="transparent.png" url="http://stackoverflow.com"></div>

使用 beforeLoad 回调函数：

jQuery(function($) {
    $("div[url]").lazy({
        beforeLoad: function (element) {
            element.load(element.attr("url"));
        }
    });
});

- Nguyễn Thành Luân

Answer 3

我知道这是一个老话题，但为了完整起见：如前所述，您可以使用jQuery.Lazy来实现此目的。但是，我不会以此处显示的方式执行它。 :) 已经有一个插件可以通过AJAX加载<div>内容。

将插件添加到您的页面中：（您还需要jQuery或Zepto）

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.1/jquery.lazy.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.1/plugins/jquery.lazy.ajax.min.js"></script>

准备你的 div 元素：（注意 data-loader 和 data-src 属性）

<div data-loader="ajax" data-src="ajax.html"></div>

开始使用 Lazy：

$(function() {
    $("div[data-src]").Lazy();
});

那就这样了！data-src 中的内容将在用户滚动到 <div> 时加载。更多信息在此处。

- eisbehr

---

类型：离题。请问，eisbehr，您什么时候有空闲时间阅读此问题 - 如何通过您的jQuery.Lazy插件对网站上的评论进行延迟加载？谢谢。 - Саша Черных