0

我有以下代码，但我不明白为什么不显示加载 gif。最初隐藏在我的loadingDiv样式表中。ajaxStart 和 ajaxStop 函数应该位于 dom 的内部还是外部？

<div id="loadingDiv">
        <img src="images/ajax-loader.gif" alt="" />
</div>
<div id="ajaxLoad"></div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#loadingDiv').hide().ajaxStart( function() {
             $(this).show();  // show Loading Div
         }).ajaxStop(function(){
                $(this).hide(); // hide loading div
           });
        $("#ajaxLoad").load("engine.php");
    });
</script>
4

3 回答 3

0

您正在做的是链接到没有 ajax 进程（加载图像）的错误元素，并 .ajaxComplete()改为尝试以下一个：

<script type="text/javascript">
        $(document).ready(function() {
            $('#loadingDiv').hide()
            $("#ajaxLoad").ajaxStart( function() {
                 $('#loadingDiv').show();  // show Loading Div
            }).ajaxComplete(function(){ // <--------------try with .ajaxComplete
                  $('#loadingDiv').hide(); // hide loading div
            });
            $("#ajaxLoad").load("engine.php");
         });
</script>

更新

从文档：

从 jQuery 1.8 开始，“.ajaxStart()”方法只能附加到“document”。

从 jQuery 1.8 开始，“.ajaxStop()”方法只能附加到“document”。

从 jQuery 1.8 开始，“.ajaxComplete()”方法只能附加到“document”。

因此，如果您使用的是 1.8+，请尝试以下一个：

    <script type="text/javascript">
        $(document).ready(function() {

            $('#loadingDiv').hide();

            $(document).ajaxStart( function() {
                 $('#loadingDiv').show();  // show Loading Div
            }).ajaxComplete(function(){ // <--------------try with .ajaxComplete
                  $('#loadingDiv').hide(); // hide loading div
            });
            $("#ajaxLoad").load("engine.php");
         });
</script>
于 2013-06-05T08:12:48.493 回答
0

使用下面的代码可以在这里工作，你会遗漏一些东西：

<script type="text/javascript">
        $(document).ready(function() {
            $('#loadingDiv').hide()
            $("#ajaxLoad").ajaxStart( function() {
                 $('#loadingDiv').show();  // show Loading Div
            }).ajaxComplete(function(){ 
                  $('#loadingDiv').hide(); // hide loading div
             }).load("engine.php");
         });
</script>
于 2013-06-05T08:15:53.773 回答
0

您正在名为“ ajaxLoad ”的 div 中进行 AJAX 调用，但您正在“ loadingDiv ”div中设置 ajaxStart/ajaxStop 事件。这些 AJAX 事件永远不会以这种方式触发。您需要将 AJAX 事件处理程序从loadingDiv附加到父 div ，以便它们冒泡，或者在与设置 ajaxStart/ajaxStop 事件的 div 相同的 div 中进行调用。

查看这些页面以获取更多信息：

于 2013-06-05T08:16:16.183 回答