加载时未显示Progress.gif

Progress .gif not displaying for a .load

本文关键字：Progress gif 显示 加载      更新时间：2023-09-26

我正在尝试编写一些代码，以便在将文件pts.php加载到index.php上的#contentdiv（页面加载时）时，将显示一个加载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>

如有任何帮助/提示，我们将不胜感激。非常感谢。

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

Ex

$("#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

load是异步的，因此您需要等待它完成。

你需要这样的东西：

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

您可以使用ajaxStart和ajaxStop函数来显示或隐藏加载图像。

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

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

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

相关文章：