Javascript 在附加内容之前延迟加载图像

Javascript 在附加内容之前延迟加载图像,javascript,android,jquery,html,css,Javascript,Android,Jquery,Html,Css,当我滚动到页面末尾时,我正在使用window.scroll功能添加新内容。同时,加载微调器图像出现在中心,但几乎没有被注意到。我想完成的是,当我滚动到页面底部时,加载的图像微调器应该首先出现在最后一个内容的末尾,并延迟10秒,然后在隐藏之前缓慢添加(fadein)新内容 $(window).scroll(function () { if ($(window).scrollTop() == $(document).height() - $(window).height()) {

当我滚动到页面末尾时,我正在使用window.scroll功能添加新内容。同时,加载微调器图像出现在中心,但几乎没有被注意到。我想完成的是,当我滚动到页面底部时,加载的图像微调器应该首先出现在最后一个内容的末尾,并延迟10秒,然后在隐藏之前缓慢添加(fadein)新内容

$(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();
        });
    });
}});
你可以试试这个

$('#loader').fadein(10000);
像这样的东西应该能起作用

$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        $('#loader').fadeIn(5000);
    $.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').fadeOut(5000);
    });
}});
尝试:

请注意,它是
fadeIn
(区分大小写)

或者使用
$('#loader').show()和末尾的淡出(取决于您的需要):


我认为这是一个很好的方法,可以减缓或延迟内容的附加,而不仅仅是加载程序
.fadeIn()
然后
.fadeOut()
。您可以通过将附件放在
setTimeout()


不,未捕获类型错误:对象[Object Object]没有“fadein”方法。您是否将jqeury与它一起使用?请更具体一些。您是指jqueryjsv1.9.1吗,如果是的话,是指setimeout(function(){$('#loader').hide()},10000);很抱歉,试试这个$('loader').fadeIn(10000);
$('#loader').fadeIn(1000);
$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        $('#loader').show();
    $.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').fadeOut(1000);
    });
}});
$(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);
       });

    }
});