Question

我有以下代码，我不明白为什么加载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>

Answer 1

你正在做的是链接到没有ajax进程的错误元素（加载图像）并改为 .ajaxComplete() 而是尝试低于1：

<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>

Answer 2

使用下面的代码，你可以在这里找不到的东西：

<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>

Answer 3

您正在div中调用名为“ ajaxLoad ”的AJAX，但您要在“ loadingDiv ”div中设置ajaxStart / ajaxStop事件。这些AJAX事件永远不会那样。您需要将AJAX事件处理程序附加到来自 loadingDiv 的父div，以便它们会冒泡，或者在与ajaxStart / ajaxStop事件所在的div相同的div中进行调用已经成立。

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

Ajax加载div没有显示

3 个答案:

更新