0

为了在执行 ajax 请求时有一个指示器，我得到信息说我应该将带有动画 gif 的指示器放置在页面元素中，然后在 ajax 函数成功时替换数据。

如果我使用 src="ajax-loader.html" 添加指标源，则 ajax 调用会将其保留在原位，并且不会将其替换为数据。如果我使用 .load("ajax-loader.html") 添加指标源，则在 ajax 调用之前它根本不会显示。如果我在 beforesend 事件的 ajax 调用中添加它，它也不会显示。如果我进行两次 ajax 调用，一次加载指标，一次加载数据，同样会发生。必须有一种方法可以在这个简单的代码中显示指标。

这是页面元素的 HTML。

   <iframe id="lcupco" style="position: relative; top: 5px; width: 100%; height: 200px; border: 2px solid grey; margin-bottom: 15px;"></iframe>

这是指标的 HTML。

<html>
<head></head>
<body>
    <img src='images/ajax-loader.gif'/>
</body>
</html>

这是代码

  1. 调用 .load

    $(document).ready(function(){
$('#lcupco').load("ajax-loader.html");});

$.ajax({   
    url: 'luxcal/index.php?cP=40',   
    cache: false,
    async: true,
    success: function(data) {
    $('#lcupco').html(data);   
    },
});

  2. 使用前置

`

   $.ajax({
            url: 'luxcal/index.php?cP=40',   
            cache: false,
            async: true,
            beforeSend: function() { 
                $('#lcupco').load('ajax-loader.html');
                // $('#lcupco').html('<html>Initializing calendar...</html>'); //simple text didn't load either.
            },
            success: function(data) {
            $('#lcupco').html(data);   
            },
    });
  1. 使用两个 ajax 调用：一个用于指标，一个用于数据

`

$.ajax({   
    url: 'ajax-loader.html',   
    cache: false,
    async: true,
    success: function(data) {
    $('#lcupco').html(data);   
    },
});


$.ajax({   
    url: 'luxcal/index.php?cP=40',   
    cache: false,
    async: true,
    beforeSend: function() { 
        $('#lcupco').html('<html>Initializing calendar...</html>');
    },
    success: function(data) {
    $('#lcupco').html(data);   
    },
});

`

4

3 回答 3

0

试试看： 

$.ajax({
                url: 'luxcal/index.php?cP=40',   
                cache: false,
                async: true,
                beforeSend: function() { 
                    $('#lcupco').append($('<img class="indic" src="images/ajax-loader.gif"/>'));
                },
                success: function(data) {
                    $('#lcupco', '.indic').remove();
                    $('#lcupco').html(data);   
                },
        });

也不要忘记src属性采用双引号 (") 而不是单引号 (')

于 2011-12-27T17:06:53.873 回答
0

对所有效果的一种可能解释可能只是您无法设置内部 HTML 或加载 iframe 的内容，因为浏览器根据 iframe 的src属性确定 iframe 的内容。

通常你不会使用 iframe 进行异步调用，一个简单的 div 应该可以工作。使用 div，在之前设置 html（使用 ahtml()或load()函数）并在完整的处理程序中替换它会很好。

于 2011-12-27T17:09:03.857 回答
0

您可以将预加载器 gif 添加到索引页面。无需单独加载。然后在加载 iframe 时，您可以隐藏或删除它。你可以在这里看到一个演示：http: //jsfiddle.net/diode/dAdtU/。单击加载按钮时，此处设置了 iframe 源。这可以在页面就绪时完成，甚至您可以直接设置源。当负载甚至被触发时，预加载器被删除。

使用 ajax，您可以加载 html 内容以替换/修改页面中特定元素的内部 html（div、p、ul 等）。但不推荐使用它来加载整个页面。

于 2011-12-27T17:46:41.357 回答