在滚动时使用ajax加载内容
在滚动时使用ajax加载内容
提问于 2010-07-20 01:59:43
我使用jQuery工具插件作为图像滑块(image here)，但由于大量的图像，我需要一次加载几个。因为它是javascript编码的，据我所知我不能知道滚动的位置。我想在最后一张图片或类似的东西出现时加载它们。我不知道我放在哪里，事件监听器也不知道。
下面是我的代码http://jsfiddle.net/PxGTJ/
请给我一点光！
回答 4
Stack Overflow用户
回答已采纳
发布于 2010-08-11 01:01:04
我只需要使用jQuery Tools的API，即scrollable()方法中的onSeek参数。
差不多就是这样
$(".scrollable").scrollable({
vertical: true,
onSeek: function() {
row = this.getIndex();
// Check if it's worth to load more content
if(row%4 == 0 && row != 0) {
var id = this.getItems().find('img').filter(':last').attr('id');
id = parseInt(id);
$.get('galeria.items.php?id='+id, null, function(html) {
$('.items').append(html);
});
}
}
}); Stack Overflow用户
发布于 2010-07-20 03:27:47
这可以通过以下方式实现：
//When the DOM is ready...
$(document).ready(function() {
//When the user scrolls...
$(window).scroll(function() {
var tolerance = 800,
scrollTop = $(window).scrollTop();
//If the the distance to the top is greater than the tolerance...
if(scrollTop > tolerance) {
//Do something. Ajax Call, Animations, whatever.
}
}) ;
});这应该能起到作用。
编辑：因为您没有使用原生滚动，所以我们必须对代码进行一些修复：
//When the DOM is ready...
$(document).ready(function() {
//When the user scrolls...
$("div.scrollable").find(".next").click(function() {
var tolerance = 800,
// The absolute value of the integer associated
// to the top css property
scrollTop = Math.abs(parseInt($("div.items").css("top")));
//If the the distance to the top is greater than the tolerance...
if(scrollTop > tolerance) {
//Do something. Ajax Call, Animations, whatever.
}
}) ;
});Stack Overflow用户
发布于 2010-07-20 02:42:20
试试这样的东西
$('#scrollable').find('img:last').load(function() {
//load the content
});或者找到最后一个图像的offset位置/位置，并在到达scrolling上的offset position时尝试加载内容
HTML：
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<span>Hello !!</span>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div> 一些CSS：
div {
width:200px;
height:200px;
overflow:scroll;
}Javascript：
$(document).ready(function() {
$('div').scroll(function() {
var pos = $('div').scrollTop();
var offset = $('span').offset().top;
if(pos >= offset ) {
alert('you have reached your destiny');
}
});
}); 这是 的快速演示
尽管演示没有满足您的全部要求，但我相信它确实为您提供了进一步的some light :)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3283669
复制相关文章
相似问题
腾讯云开发者
