2012-08-27 166 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