你如何制作加载符号[重复]答案

【问题标题】：How do you make a loading symbol [duplicate]你如何制作加载符号[重复]
【发布时间】：2015-09-14 02:02:00
【问题描述】：

我的页面加载速度很慢，所以我想添加一个加载符号。我有一个加载图像，现在我只想让它显示加载符号，直到它加载。我该怎么做？

【问题讨论】：

不要为未标记的问题提出 jQuery 解决方案。

【解决方案1】：

使用您的图像创建一个 div 块，并将其余内容包含在另一个 div 中：

<div id='loadingDiv'>
    Loading...  <img src='path to loading image' />
 </div> 
<div id='content'>
...
</div>

确保在 css 中 #content 设置为 display: hidden;

然后添加以下js：

$( window ).load(function() {
    $('#loadingDiv').hide();
    $('#content').show();
});

【讨论】：

【解决方案2】：

在开始的body标签正下方添加div。

<div class="loader"></div>

现在为类添加 CSS

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('images/page-loader.gif') 50% 50% no-repeat /*image that you want to show at loading time */rgb(249,249,249);
}

之后，只需在 HTML 页面的 head 部分添加此脚本..

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $(".loader").fadeOut("slow");
})
</script>

【讨论】：

<script> 标签不需要type="text/javascript"。