Question

我想向用户显示加载图标，直到页面元素完全加载。我怎么能用javascript做到这一点，我想用javascript做，而不是jquery？

Here是Google如何做到的链接我怎样才能做到这一点？在onload事件或类似的东西上触发一些函数..我知道它会像这样或其他任何方式做到这一点吗？或者有一些事件呢？

更新我使用display属性做了一些事情我隐藏了body元素但是body标签的onload我更改了它的属性但是在哪里放置加载图标并添加更多的交互性。

Answer 1

<强> HTML

<body>
    <div id="load"></div>
    <div id="contents">
          jlkjjlkjlkjlkjlklk
    </div>
</body>

<强> JS

document.onreadystatechange = function () {
  var state = document.readyState
  if (state == 'interactive') {
       document.getElementById('contents').style.visibility="hidden";
  } else if (state == 'complete') {
      setTimeout(function(){
         document.getElementById('interactive');
         document.getElementById('load').style.visibility="hidden";
         document.getElementById('contents').style.visibility="visible";
      },1000);
  }
}

<强> CSS

#load{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url("https://www.creditmutuel.fr/cmne/fr/banques/webservices/nswr/images/loading.gif") no-repeat center center rgba(0,0,0,0.25)
}

注意：
如果您的页面加载速度很快，您将看不到任何加载gif，因此在加载时间较长的页面上使用此代码，我还建议您将 js 放在页面底部。的

<强>样本

http://jsfiddle.net/6AcAr/ - 超时（仅限演示）
http://jsfiddle.net/47PkH/ - 没有超时（将其用于实际页面）

<强>更新

http://jsfiddle.net/d9ngT/

Answer 2

将加载程序放入网站的最简单方法。

HTML：

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

CSS：

#loading {
position: fixed;
width: 100%;
height: 100vh;
background: #fff url('images/loader.gif') no-repeat center center;
z-index: 9999;
}

JQUERY：

<script>
jQuery(document).ready(function() {
    jQuery('#loading').fadeOut(3000);
});
</script>

Answer 3

添加class =＆＃34; loading＆＃34;在body标签中然后使用下面的脚本和下面的css代码

body {
            -webkit-transition: background-color 1s;
            transition: background-color 1s;
        }
        html, body { min-height: 100%; }
        body.loading {
            background: #333 url('http://code.jquery.com/mobile/1.3.1/images/ajax-loader.gif') no-repeat 50% 50%;
            -webkit-transition: background-color 0;
            transition: background-color 0;
            opacity: 0;
            -webkit-transition: opacity 0;
            transition: opacity 0;
        }

使用此代码

var body = document.getElementsByTagName('body')[0];
var removeLoading = function() {
    setTimeout(function() {
        body.className = body.className.replace(/loading/, '');
    }, 3000);
};
removeLoading();

演示：https://jsfiddle.net/0qpuaeph/

Answer 4

进行ajax调用的元素可以调用load（targetElementId）方法，如下所示，将load / icon放入目标div中，并在准备就绪时将ajax结果写入。这对我很有用。

<div style='display:none;'><div id="loading" class="divLoading"><p>Loading... <img src="loading_image.gif" /></p></div></div>
<script type="text/javascript">
function loading(id) {
    jQuery("#" + id).html(jQuery("#loading").html());
    jQuery("#" + id).show();
}

Answer 5

HTML页面

<div id="overlay">
<img src="<?php echo base_url()?>assest/website/images/loading1.gif" alt="Loading" />
 Loading...
</div>

脚本

$(window).load(function(){ 
 //PAGE IS FULLY LOADED 
 //FADE OUT YOUR OVERLAYING DIV
 $('#overlay').fadeOut();
});

Answer 6

HTML，CSS，JS都很好，如上述答案所述。但是，他们不会阻止用户单击加载程序和访问页面。而且，如果翻页时间很大，它看起来会破损并且无法达到目的。

因此在CSS中考虑添加

pointer-events: none;
cursor: default;

此外，如果您使用的是fontawesome，而不是使用gif文件，那么每个人现在都在使用它，请考虑在您的html中使用

<i class="fa fa-spinner fa-spin">

Answer 7

首先，在您的主页面中使用加载图标

然后，从主页中删除</body>和</HTML>并将其替换为

<?php include('footer.php');?>

在footer.php文件中输入

：

<?php
    $iconPath="myIcon.ico" // myIcon is the final icon
    echo '<script>changeIcon($iconPath)</script>'; // where changeIcon is a javascript function whiwh change your icon.
    echo '</body>';
    echo '</HTML>';
?>

显示加载图标，直到页面加载？

7 个答案: