如何添加一个加载GIF图像到我的网页 - how to add a loading gif image to my web page

我如何添加一个加载GIF图像时，每次我尝试加载一个页面，我有一个管理页面上的链接，我想当我点击一个链接之前的页面加载它应该显示GIF图像，我添加了一些javascript代码在标题标签和在正文标签我添加了这个代码

<div id="loading"></div>

管理页面看起来像这样

<html>
    <head>
    <script type="text/javascript">
        function preloader(){
            document.getElementById("loading").style.display = "none";
            document.getElementById("content").style.display = "block";
        }//preloader
        window.onload = preloader;
</script>
        <title>profile- Admin panel</title>
    </head>
    <body>
<div id="loading"></div>    
<?php include 'includes/connect.php'; ?>
<?php include 'title_bar.php'; ?>
<link rel="stylesheet" href="css/loading.css">
<h3>admin panel system</h3>
<p> you are logged in as <b><?php echo $username?></b> [<?php echo $level_name;?>]</p>
<?php
if($user_level != 1){
 header('location : profile.php');
}
?>
<p>
 <ul class="dash">                          
            <li>
            <a href="#" title="Report" class="tip" data-placement="bottom" >
            <img src="images/icons/report.png" alt="" />
            <span>Report</span>
            </a>
            </li>
             <li>
            <a href="view.php" title="Customers" class="tip" data-placement="bottom" >
            <img src="images/icons/customers.png" alt="" />
            <span>Customers</span>
            </a>
            </li>
            </ul>
</p>
<p>
<?php
if(isset($_GET['type']) && !empty($_GET['type'])){
?>
<table>
<tr><td width='150px'> Users</td><td>Options</td></tr>
<?php
 $list_query = mysql_query("SELECT id, username, type FROM users");
 while($run_list = mysql_fetch_array($list_query)){
  $u_id = $run_list['id'];
  $u_username = $run_list['username'];
  $u_type = $run_list['type'];
 ?>
 <tr><td><?php echo $u_username?></td><td>
 <?php
 if($u_type == 'a'){
     echo "<a href='option.php?u_id=$u_id&type=$u_type'>Deactivate</a>";
} else{
    echo "<a href='option.php?u_id=$u_id&type=$u_type'>activate</a>";
}

 ?>
 </td></tr>
 <?php
 }
?>
</table> 
<?php
} else{
   echo "Select Options Above";
}
?>
</body>
</html>

这是我在loading。css

中的内容

div#content {
    display: none;
    }
div#loading {             
    top: 200 px;
    margin: auto;
    position: absolute;
    z-index: 1000;
    width: 160px;
    height: 24px;
    background: url('../images/loading (1).gif') no-repeat;
    cursor: wait;                
    }

您缺少一个内容div。您需要将加载器以外的所有内容包装在id为"content"的div中。

<div id="content">
<h3>admin panel system</h3>
    ...
</div>
</body>

除此之外，在一个简单的页面上，加载事件会很快触发。除非页面上有很多图像，否则用户可能只会看到一个闪烁。如果你真的想让他们看到页面，那么你可以在你的预加载功能中添加半秒的延迟。

function preloader(){
    setTimeout(function(){    
        document.getElementById("loading").style.display = "none";
        document.getElementById("content").style.display = "block";
    }, 500);
}//preloader

你也可以尝试在onunload函数中反转预加载(隐藏内容，再次显示加载)，当他们改变页面时。如果您的页面需要一段时间来处理(缓慢的数据库调用等)，您可以考虑在处理发生之前将页面刷新到加载div的末尾。http://php.net/manual/en/function.flush.php

最终，我认为加载器比它的价值更麻烦，只会惹恼用户。当您完全控制请求周期时，加载器通常可以使用ajax，但在这种情况下，我不确定。尝试一下，看看哪种方法最有效。好运。