2012-08-27 200 views
1

我做了一些研究,但我無法爲我的問題找到答案。當我點擊菜單項中的選項卡時,我想要加載圖像。下面這段代碼非常適用於特定的事件,比如click()等(我嘗試了其他一些例子),但是當我的gridview加載的時候它不會。我想知道,是否有任何類型的事件在jQuery中(我沒有找到任何),當控制/實體開始執行加載時,會受到影響?我的意思是load(),onload(),ready() - 都是指加載完成的時刻。如何加載gridview時加載圖像?

這是我的代碼。任何幫助/建議是善意讚賞:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#spinner").bind("ajaxSend", function() { 
      $(this).show(); 
     }).bind("ajaxError", function() { 
      $(this).hide(); 
     }); 
    }); 
</script> 

此外,

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#btnSave,#btnOne,#btnTwo,#btnThree,#btnFour,#btnUndo').click(function() { 
      //$("#spinner").append('<img id="img-spinner" src="Images/ajax-loader-test.gif" alt="Loading.." style="position: absolute; z-index: 200; left:50%; top:50%; " />'); 
      $('#spinner').show().fadeIn(20); 
     }); 
    }); 
</script> 

而ASP代碼:

<div id="spinner" class="spinner" style="display: none; width: 100%; height: 150%; position: absolute; z-index: 100; background-color: Gray; left: 0; top: 0; bottom: 0; right: 0"> 
    <img id="img-spinner" src="Images/ajax-loader-test.gif" alt="Loading.."   style="position: absolute; z-index: 200; left: 50%; top: 50%;" /> 
</div> 

謝謝你,提前爲您的幫助。

編輯:我試圖改變我的功能爲:

$(document).ready(function() { 
    $("#spinner").css.apply('display','none'); 
    }); 

,並在我的ASP代碼我去掉了顯示:無屬性,但它仍然沒有工作,我沒有得到我什麼任何線索做錯了。

回答

0

我將這段代碼添加到啓動功能:

$('body').ajaxStart(function() { 
    $('#spinner').show(); 
}); 

$('body').ajaxComplete(function() { 
    $('#spinner').hide(); 
}); 

,將顯示在div Ajax調用開始時,和隱藏它當它完成。

爲了使微調顯示在頁面加載最初,該行添加到的document.ready:

$("#spinner").hide(); 

,並採取「顯示:無;」關閉spinner div。

+0

謝謝你的幫助。是的,它像我以前的一段代碼一樣工作(當我點擊一個按鈕時(出現在需要花費一些時間完成的動作之後),這個代碼就會出現),但是當我點擊一個菜單項時它不會出現這需要我到一個包含大量數據的GridView的頁面(加載需要大約3-4秒):) – SunnyDay

+0

你的gridview如何被加載?你可以在這裏或在jsFiddle中添加/顯示代碼嗎? –

+0

(我不知道我是否正確地得到了這個問題):我的gridview加載時,包含gridview的頁面加載。通過將列表的元素簡單地綁定到網格的列上來填充gridview。但是我有大量的數據,這就是爲什麼我需要微調,使我的應用程序更具用戶響應性的原因。 – SunnyDay