页面loading特效

Question

webjs

Answer 1

 $("#loading").ajaxStart(function(){
   $(this).show();
 });
 $("#loading").ajaxStop(function(){
   $(this).hide();
 });

Answer 2

ajax有个loading属性，有个success属性，loading的时候直行加载图片的函数，success之后把图片去掉

Answer 3

这样必须使用Ajax了，那种直接后台代码查询的应该做不了吧，点击查询可以弹出一个遮罩层来，然而却不知怎么判断查询完了好去除遮罩层。

Answer 4

我找到了，要在后台加上客服端的点击事件（显示遮罩层的函数），这样查询完了，遮罩层会自动去掉：
        protected void Page_Load( object sender, EventArgs e )
        {
            btnQuery.Attributes.Add("onclick", "openProgressDiv();");            if ( !IsPostBack )
            {
                txtStartDate.Text = DateTime.Now.ToString( "yyyy-MM-" ) + "01";
                txtEndDate.Text = DateTime.Now.ToString( "yyyy-MM-dd" );
                BindGlobalShare( );
                BindCardType( );
                OnLineOrderDataBind( );
            }
        }
前台遮罩层js：
    <script type="text/javascript">
        function openProgressDiv() {
            addMask();
            
            var newDiv = document.createElement("div");
            newDiv.id = '_p_progress';
            newDiv.style.position = "absolute";
            newDiv.style.zIndex = "9999";
            newDivWidth = 100;
            newDivHeight = 100;
            newDiv.style.width = "210px";
            newDiv.style.height = "25px";
            newDiv.style.top = ($(document).height() - 25) / 2 + "px";
            newDiv.style.left = ($(document).width() - 210) / 2 + "px";
            newDiv.style.background = "#EFEFEF";
            newDiv.style.padding = "10px 20px 20px 20px";
            newDiv.innerHTML = "<h>正在处理，请耐心等待...</h>";
            document.body.appendChild(newDiv);
        }        function closeProgressDiv() {
            removeMask();
            if (docEle('_p_progress')) {
                document.body.removeChild(docEle('_p_progress'));
            }
        }        var docEle = function () {
            return document.getElementById(arguments[0]) || false;
        }        function addMask() {
            if (docEle('_p_mask')) {
                document.body.removeChild(docEle('_p_mask'));
            }
            //mask遮罩层,原理就是搞一个全屏的半透明的div,使鼠标无法点击到后面滴元素
            var newMask = document.createElement("div");
            newMask.id = '_p_mask';
            newMask.style.position = "absolute";
            newMask.style.zIndex = "1"; // 这个值要比你的div弹出层的要小,否则就回遮住你要显示的div
            _scrollWidth = Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth);
            _scrollHeight = Math.max(document.body.scrollHeight,
document.documentElement.scrollHeight);
            newMask.style.width = _scrollWidth + "px";
            newMask.style.height = _scrollHeight + "px";
            newMask.style.top = "0px";
            newMask.style.left = "0px";
            newMask.style.background = "#33393C";
            newMask.style.filter = "alpha(opacity=40)";
            newMask.style.opacity = "0.40";
            document.body.appendChild(newMask);
        }        function removeMask() {
            if (docEle('_p_mask')) {
                document.body.removeChild(docEle('_p_mask'));
            }
        }
    </script>