页面加载GIF - 有人可以解释下面的答案吗? - Page loading GIF - Could someone please explain the answer below?

Page loading GIF - Could someone please explain the answer below?

本文关键字：解释答案 GIF 加载 | 更新日期: 2023-09-27

我在此链接上找到了我正在寻找的内容如何在页面加载时显示 ajax 加载 gif 动画？但我不知道如何在我的网站上实现这一点。

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

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

提前谢谢你。

您将在这里找到所需的一切

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

当页面完全加载时，发生的第一件事是<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';
}

嗯，这是我的解决方案。

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）网页部分

将div 标签放在身体标签中的任何地方。

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

3）脚本部分

我做了两个函数，一个用于显示，另一个用于隐藏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)
}