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

时间:2013-11-02 06:53:34

标签: javascript android jquery html css

当我滚动到页面末尾时,我正在使用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();
        });
    });
}});

3 个答案:

答案 0 :(得分:0)

你可以试试这个

$('#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);
    });
}});

答案 1 :(得分:0)

尝试:

$('#loader').fadeIn(1000);

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

最后使用$('#loader').show();fadeOut(视乎您的需要而定):

$(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);
    });
}});

答案 2 :(得分:0)

我认为这也是减慢或延迟内容追加的好方法,而不仅仅是.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);
       });

    }
});