javascript - 进度 .gif 不显示 .load

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