Question

我正在尝试编写一些代码，以便在将文件pts.php加载到index.php上的#content div时（在页面加载时），将显示一个加载的gif，因为pts.php非常大，需要几秒钟。我不希望人们开始点击垃圾邮件并刷新尝试让它工作，因此gif。

我遇到的问题是，据我所知，gif根本没有显示。有没有办法测试它是否显示，如果没有，是否有人知道如何解决它？我已经通过CSS隐藏了div #loadingimagepage，这段代码位于带脚本标记的index.php页面中：

$(document).ready(function(){
    $('#loadingimagepage').show();
    $("#content"). load ("pts.php");
    $('#loadingimagepage').hide();

然后是#content div：

<div id="content">
        <div id="loadingimagepage">
            <img src="images/ajax-loader.gif" />
        </div>
</div>

任何帮助/提示将不胜感激。谢谢！

Answer 1

您的代码将在不等待负载完成的情况下处理。您需要在完成加载功能时放入$('#loadingimagepage').hide();。

实施例

$("#content").load("pts.php", function(){
    $('#loadingimagepage').hide();
});

您甚至可以测试您的加载是否成功，如果不是，则通知用户（同时仍然隐藏加载的gif）

$("#content").load("pts.php", function(passedSuccessVar){
    $('#loadingimagepage').hide();
    if(!passedSuccessVar) { alert("Error!Error! Danger Will Robinson");}
});

您目前拥有的内容：

$('#loadingimagepage').show();   //starts showing right away
$("#content"). load ("pts.php"); //starting loading content
$('#loadingimagepage').hide();   //hides the loading gif regardless of the previous function status

Answer 2

load是异步的，所以你需要等待它完成。

您需要以下内容：

$(document).ready(function(){
    $('#loadingimagepage').show();
    $("#content").load("pts.php", function(){
        $('#loadingimagepage').hide();
    });
});

Answer 3

您可以使用ajaxStart和ajaxStop功能来显示或隐藏加载图片。

每当要发送Ajax请求时，jQuery都会检查是否还有其他未完成的Ajax请求。如果没有进行，jQuery会触发ajaxStart事件。已经使用.ajaxStart()方法注册的任何和所有处理程序都会在此时执行。

  $('#loadingimagepage').hide().ajaxStart(function() {
       $(this).show();  
  }).ajaxStop (function(){
     $(this).hide(); 
  });

参考：http://api.jquery.com/ajaxStart/

进度.gif不显示.load

3 个答案: