当我滚动到页面末尾时,我正在使用 window.scroll 函数追加新内容。同时,加载微调器图像出现在中心但几乎没有注意到。我想要完成的是当我滚动到页面底部时,加载图像微调器应该首先出现在最后一个内容的末尾并延迟 10 秒,然后它在隐藏之前慢慢附加(淡入)新内容。
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
$('#loader').delay(1000).show(0);
$.getJSON("http://howtodeployit.com/?json=recentstories", function(data) {
//Set variable for currentPostcount, desiredPosts
newposts = data.posts.slice(currentPostcount, currentPostcount + desiredPosts);
$.each(newposts, function(key, val) {
//Append new contents
$("#postlist").listview().listview('refresh');
$('#loader').hide();
});
});
}});
最佳答案
我认为这也是减慢或延迟内容附加的好方法,而不仅仅是 .fadeIn()
然后是 .fadeOut()
加载器。您可以通过将附加内容放在 setTimeout()
上来实现:
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
$('#loader').fadeIn(2000);
$.getJSON("http://howtodeployit.com/?json=recentstories", function(data) {
newposts = data.posts.slice(currentPostcount, currentPostcount + desiredPosts);
setTimeout(function(){
$.each(newposts, function(key, val) {
//Append new contents
$("#postlist").listview().listview('refresh');
});
},2000);
$('#loader').fadeOut(2000);
});
}
});
关于javascript - 在附加内容之前延迟加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19739667/