页面加载 GIF - 有人可以解释下面的答案吗？答案

【问题标题】：Page loading GIF - Could someone please explain the answer below?页面加载 GIF - 有人可以解释下面的答案吗？
【发布时间】：2013-01-13 06:10:55
【问题描述】：

我在此链接How to show ajax loading gif animation while the page is loading? 上找到了我想要的东西，但我不知道如何在我的网站上实现它。

我希望在页面加载时出现一个正在加载的 GIF，并在页面完全加载 PHP 结果后自行消失。

在网站上，我使用一个页面模板 (index.php)，并根据用户的查询动态加载该页面中的所有数据。

提前谢谢你。

【问题讨论】：

@PLAudet 不，我没有，因为我听不懂。我寻求某人的帮助以简化答案。为什么我需要调用另一个 .php 文件？
在查看您的链接之后，他们正在做的是在等待 ajax 调用的回调时显示加载 gif。如果您不知道 AJAX 是什么，您可能想看看 http://www.w3schools.com/ajax/default.ASP 在您的情况下，您可能不需要进行 AJAX 调用，因此您不需要调用另一个文件。编辑您的帖子，详细说明您要做什么。
我的意思是......在你的情况下，你不需要调用另一个 PHP 文件。您基本上想要做的是在页面的完整开头显示加载 GIF，然后在页面准备好后将其隐藏。您可以使用 JQuery 实现此目的
@PLAudet 完全正确，我只需要加载 GIF 或显示/隐藏 div。
在 ajaxstart 事件中仅显示图像，成功时仅隐藏图像

标签： php javascript ajax loading gif

【解决方案1】：

你会在这里找到你需要的一切

http://mycodeprograms.blogspot.ca/2012/10/how-to-add-loader-while-page-load.html

【讨论】：

@PLAudent 非常感谢。 JS 在标签或之间移动
要成为 W3C，它应该在 body 标签之间，但

【解决方案2】：

当页面完全加载时，首先发生的是<body> 的onload 事件触发。这是您使图像消失的地方。

例如，让<body> 标签看起来像这样：

<body onload="makeLoadingGifDisappear()">

在页面正文的某处给你的 GIF 一个 ID：

<img src="loadinggif.gif" id="myLoadingGif">

然后在页面的JavaScript中，使makeLoadingGifDisappear函数隐藏GIF：

function makeLoadingGifDisappear() {
 document.getElementById('myLoadingGif').style.display = 'none';
}

【讨论】：

感谢@eds，但它没有用。加载的 GIF 并没有消失。
抱歉，'none' 应该有引号。也许这会奏效？抱歉，我从未实际测试过代码，但我非常有信心这种方法应该可以工作，因为我已经实现了类似的东西......
谢谢。请在下面查看我的答案，它运行良好。即使是 hideloadgif() 也不重要，因为它会在页面加载后自行消失。

【解决方案3】：

嗯，这是我的解决方案。

1) CSS 部分

#loadgif {
    padding-top:2px;
    font: 10px #000;
    text-align:center;
    vertical-align:text-top;

    height: 80px;
    width: 130px;

    /* Centering the div to fit any screen resolution */
    top: 50%;
    left: 50%;
    margin-top: -41px; /* Div height divided by 2 including top padding */
    margin-left: -65px; /* Div width divided by 2 */
    position: absolute;
    display:    none; /* JS will change it to block display */
    position:   fixed;
    z-index:    1000;

    /* Loading GIF set as background of the div */
    background: #FFF url('../img/loader.gif') 50% 75% no-repeat;

    /* Misc decoration */
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:#7580a8 solid 1px;
}

2) HTML 部分

将 div 标签放在 body 标签内的任意位置。

<!-- With or without text -->
<div id="loadgif">Loading...</div>

3) Javascript 部分

我做了两个功能，一个显示一个隐藏div。

<script type="text/javascript">

// Hide function by changing <div> style display attribute back to none
function hideloadgif() {
    document.getElementById('loadgif').style.display = 'none';
}

// Show function by changing <div> style display attribute from none to block.
function showloadgif() {
    document.getElementById('loadgif').style.display = 'block';
}

// Making sure that any other event running in the background isn't affected
if (window.addEventListener) { // Mozilla, Netscape, Firefox
    window.addEventListener('load', WindowLoad, false);
} else if (window.attachEvent) { // IE
    window.attachEvent('onload', WindowLoad);
}

// Call the hideloadgif() function on click event,
// with interval time set to 3 seconds to hide the <div>
function WindowLoad(click) {
    setInterval("hideloadgif()",3000)
}
</script>

4) 显示 div。在任何地方使用 onlick="" 事件调用函数 showloadgif()。

例如

<img src="abc/def.jpg" onlick="showloadgif()">

点击图片后会出现div，同时hideloadgif()会触发3秒内隐藏div。

function WindowLoad(click) {
    setInterval("hideloadgif()",3000)
}

【讨论】：