Question

我有这个脚本：

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

$(document).ready(function() { 
$('.button').click(function () {
$("#contentDiv").load("content.php");
});

$('.button2').click(function () {
$("#contentDiv").load("content2.php");
});
});

这个html：

<div id="contentDiv">
<div id="loading"></div>

</div>

我想在每次新加载之前显示加载.gif，但现在它只在第一次加载整页时才有效。因此，当我第一次点击“按钮”，“加载”显示时，“内容”被加载并且“加载”隐藏。当我点击“button2”时，“content2”被加载，但“loading”没有显示。我尝试从“contentDiv”中取出“加载”div，但是“loading”从不隐藏。

Answer 1

写

<div id="loading" style="display:none"></div>

以上

<div id="contentDiv">

Answer 2

您正在替换包含#contentDiv div的#loading的内容，因此如果.load()中的div不存在，则content.php可能不再存在该内容1}}或content2.php。它可能看起来好像您的代码第一次完全正常工作，而不是简单地隐藏#loading您实际上完全删除它。

如果这不是问题，那么AJAX调用可能会足够快地完成元素显示，然后再次隐藏，足够快，以至于你无法看到它发生。

Answer 3

我这样做了：

$(document).ajaxStart(function() {
$('.loading').show();
$('#contentDiv').hide();
}).ajaxStop(function() {
$('.loading').hide();
$('#contentDiv').show();
});

HTML：

<div id="contentDiv"></div>
<div class="loading"></div>

我必须加载div类，因为ID无效。

Answer 4

ID 是指您网页上的单个唯一实例。另一方面， Class 可以多次重复使用。所以真的以下改变应该有效：

<div class="loading"></div>

Ajax预加载器只能工作一次

4 个答案: