顯示'正在加載內容消息'

我正在使用它來動態加載事件，但沒有頁面刷新，但加載時間太長，所以爲了更好的用戶體驗我認爲我們應該添加「加載事件」或類似的，但我的迄今爲止的嘗試都是徒勞的。顯示'正在加載內容消息'

function calendarAjax() { 

    $('#month_nav a').live('click', function() { 
     $('#events_container').animate({ opacity: "0" }, 200).load($(this).attr('href')+' #events_content' , function(){ 
      $(this).animate({ opacity: "1" }, 600); 
     }); 
     return false; 
    }) 

};

非常感謝任何幫助。

謝謝。

來源

2012-05-15 Steven Grant

有幾個方法，下面是使用$ajaxStart和$.ajaxStop

$('#loadingDiv') 
    .hide() // hide it initially 
    .ajaxStart(function() { 
     $(this).show(); 
    }) 
    .ajaxStop(function() { 
     $(this).hide(); 
    });

假設你加載div的ID全局加載圖像/文本代碼爲loadingDiv含有文本或加載圖片。

更新

$.load是一個jQuery Shorthand method其中相同的數人例如$.post,$.get,$getJSON,$.getScript使用引擎蓋下的$.ajax功能。

$.ajaxStart是註冊一個回調時，所有的Ajax請求完成

所以如果你使用的要執行將在第一Ajax請求啓動和 $.ajaxStop用同樣的方式來註冊一個回調執行的方式上面的代碼顯示和隱藏加載div，它會自動顯示當您的$.load函數的ajax請求啓動時，加載文本/圖像，並在ajax請求完成時隱藏，假設該頁面中只有一個$.ajax或$.ajax速記方法。

來源

2012-05-15 19:57:26

那麼這與我已有的東西有什麼關係？ –

更新了答案，可以讓您瞭解如何在當前設置下使用該代碼。 :) –

該Jquery BlockUI plugin是完美的爲您的需求。

來源

2012-05-15 19:55:25 xbonez

您需要三樣東西：

裝載器：

<div id="loader"> 
I'm loading something 
</div>

CSS爲您的裝載機：

#loader { 
    /* some design */ 
}

，那麼你需要做的是將切換其可見性的JavaScript方法：

var loader = { 
    show: function() { 
     $('#loader').show(); 
    }, 
    hide: function() { 
     $('#loader').hide(); 
    } 
};

然後你可以簡單地只要說loader.show()任何時候你想要的東西加載，和loader.hide()當你想消除該消息。

來源

2012-05-15 19:55:32 Kristian

顯示'正在加載內容消息'

回答

相關問題