0

ページの最後までスクロールするときに、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();
        });
    });
}});
4

3 に答える 3

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);
    });
}});
于 2013-11-02T06:59:58.287 に答える
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);
       });

    }
});
于 2013-11-02T08:28:52.923 に答える