jQuery jquery延迟加载div中的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21219283/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery lazy load content in div
提问by ZOE RULE
I want to load the content in div.I got many jquery scoll plugins but all are they for whole page load.I want to load content in existing div when scroll reaches at bottom of div.Can anyone help me ?
我想加载 div 中的内容。我有很多 jquery scoll 插件，但它们都是用于整个页面加载的。我想在滚动到达 div 底部时加载现有 div 中的内容。有人可以帮我吗？
回答by Merlin
You can do something like this using JQuery and Ajax:
你可以使用 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
}
}
回答by Nguy?n Thành Luan
You can do something like this using JQuery and this lazyload plugin.
你可以使用 JQuery 和这个lazyload 插件来做这样的事情。
Your div:
你的div：
<div data-src="transparent.png" url="http://stackoverflow.com"></div>
Use beforeLoadcallback:
使用beforeLoad回调：
jQuery(function($) {
$("div[url]").lazy({
beforeLoad: function (element) {
element.load(element.attr("url"));
}
});
});
回答by eisbehr
I know it's an old topic, but just to be complete: As said before, you could use jQuery.Lazyfor this. But I would not do it the here shown way. :) There is already a plugin for loading <div>content via AJAX too.
我知道这是一个老话题，但只是为了完成：如前所述，您可以为此使用jQuery.Lazy。但我不会按照这里显示的方式来做。:) 已经有一个插件可以<div>通过 AJAX加载内容了。
Add the Plugin to your page:(you will need jQuery or Zepto as well)
该插件添加到您的网页：（您需要的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>
Prepare your div's:(note the data-loaderand data-srcattributes)
准备好你的div： （注意data-loader和data-src属性）
<div data-loader="ajax" data-src="ajax.html"></div>
And start using Lazy:
并开始使用 Lazy：
$(function() {
$("div[data-src]").Lazy();
});
That's it! The content given in data-srcwill be loaded whenever the user reaches the <div>by scrolling. More inormations here.
就是这样！data-src每当用户<div>通过滚动到达 时，就会加载 中给出的内容。更多信息在这里。
