你如何制作一个加载符号

时间:2015-09-13 17:41:39

标签: javascript html css

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

3 个答案:

答案 0 :(得分:-1)

首先,请不要来Stackoverflow寻找现成的解决方案。尝试自己解决问题。如果这不起作用,那就来这里 对于解决方案,请使用jQuery

$(function(){
  $(".loading").delay(1000).hide(); // wait one second, then hide the loading icon, assuming that is has a class of loading.
});

答案 1 :(得分:-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 :(得分:-1)

在开始身体标记的正下方添加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>