1

我做了一些研究，但我无法找到我的问题的答案。当我从我的菜单项中单击一个选项卡时，我想要一个加载图像。以下代码非常适用于特定事件，例如 click() 等（我尝试了其他几个示例），但在我的 gridview 加载时它不会。我想知道，jquery 中是否有任何类型的事件（我没有找到任何事件）与控件/实体何时开始执行加载有关？我的意思是 load(),onload(),ready() - 都是指加载完成的那一刻。

这是我的代码。任何帮助/建议都将不胜感激：

<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 代码中，我删除了 display:none 属性，但它仍然不起作用，我不知道我做错了什么。

4

1 回答 1

0

我会将此代码添加到您的启动功能中：

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

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

这将在 ajax 调用开始时显示 div，并在完成时将其隐藏。

要使微调器在页面初始加载时显示，请将此行添加到 document.ready： 

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

并采取“显示：无；” 关闭微调器 div。

于 2012-08-27T14:13:12.667 回答