單擊事件延遲和預加載器動畫

我想在頁面轉換中結合兩種技術。首先，當用戶點擊一個鏈接時，點擊事件應該延遲200ms並顯示css動畫（如：淡入淡出），之後新頁面將正常加載。然後，對於網絡連接速度較慢的訪問者，在第一次動畫之後，他們會看到預加載器。問題是，似乎兩種技術都不適合彼此。任何建議傢伙？單擊事件延遲和預加載器動畫

PS：其實我的這些傢伙網站的啓發：http://rsq.com/

這裏是我的代碼：

$body = $("body"); 
$(document).on({ 
    ajaxStart: function() { 
     $body.addClass("loading"); //for slow connection, visitors with faster connection may not notice this... 
    }, 
    ajaxStop: function() { 
     $body.removeClass("loading"); 
    } 
}); 
$('a').on("click", function() { 
    if ($(this).attr('href') != '#') { 
     var href = $(this).attr('href'); 
     $('#wrapper').addClass('fade_animation'); //animation right before new page request 
     setTimeout(function() { 
      window.location = href 
     }, 200);     
     return false; 
     $.post($(this).attr('href')); 
    }  
});

來源

2014-01-11 under5hell

任何東西;將不會被調用 –

是的，你是對的。但返回false是需要的衰退動畫正常工作，但它殺死了ajax後（這是前加載器動畫所需要的。這真是令人困惑。我試過把ajax的帖子裏面的setTimeout，但沒有運氣:( – under5hell

我覺得這就夠了：

相反的：

return false; 
    $.post($(this).attr('href'));

這樣做

$.post($(this).attr('href')); 
    return false;

所以$.post得到執行。

來源

2014-01-11 23:10:35

似乎預加載帶有出現衰落的同時動畫給我。無論如何，感謝線索:) – under5hell

你能增加你的超時時間3000（與我上述建議的變化），並確認我，如果你看到它simoultaneous？ –

我想我找到了解決辦法，但不知道這是否是一個很好的方式，但它的作品。返回假後

$('a').on("click", function(){ 

     if($(this).attr('href') != '#') 
     { 
      var href = $(this).attr('href'); 
      $('#wrapper, footer').addClass('fading animation'); 
      setTimeout(function() { 
       // window.location = href 
       $.post(window.location = href) // this line works :) 
      }, 200); 
     return false; 
      // $.post($(this).attr('href'));  
     } 

    });

來源

2014-01-11 23:20:35 under5hell

單擊事件延遲和預加載器動畫

回答

相關問題