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

Question

I wanted to show a loading icon to users until the page elements are fully loaded.我想向用户显示加载图标，直到页面元素完全加载。 How can I do that with javascript and I want to do it with javascript, not jquery?我怎样才能用 javascript 做到这一点，我想用 javascript 而不是 jquery 来做到这一点？

Here is a link how google does it How can I do this?这是谷歌如何做到这一点的链接我该怎么做？ triggering some function on onload event or something like this .. I know it will be done somewhat like this or any other ways to do it?在 onload 事件或类似的东西上触发一些函数..我知道它会像这样或任何其他方式来完成？ Or there is some event for it?或者有什么活动？

UPDATE I did something using display property I hide the body element but and onload of body tag I change its property but where to put the loading icon and add more interactivity.更新我使用 display 属性做了一些事情我隐藏了 body 元素但是加载了 body 标签我改变了它的属性但是在哪里放置加载图标并添加更多的交互性。

Answer 1

HTML HTML

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

JS 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 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)
}

Note:笔记：
you wont see any loading gif if your page is loaded fast, so use this code on a page with high loading time, and i also recommend to put your js on the bottom of the page.如果您的页面加载速度快，您将看不到任何加载 gif，因此在加载时间较长的页面上使用此代码，我还建议将您的js放在页面底部。

DEMO演示

http://jsfiddle.net/6AcAr/ - with timeout(only for demo) http://jsfiddle.net/6AcAr/ - 超时（仅用于演示）
http://jsfiddle.net/47PkH/ - no timeout(use this for actual page) http://jsfiddle.net/47PkH/ - 没有超时（将其用于实际页面）

update更新

http://jsfiddle.net/d9ngT/ http://jsfiddle.net/d9ngT/

Answer 2

The easiest way to put the loader in the website.将加载器放入网站的最简单方法。

HTML: HTML：

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

CSS: 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

add class="loading" in the body tag then use below script with follwing css code在 body 标签中添加 class="loading" 然后使用下面的脚本和以下 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;
        }

Use this code使用此代码

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

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

Answer 4

HTML, CSS, JS are all good as given in above answers. HTML、CSS、JS 都很好，如上述答案所示。 However they won't stop user from clicking the loader and visiting page.但是他们不会阻止用户点击加载器和访问页面。 And if page time is large, it looks broken and defeats the purpose.如果页面时间很大，它看起来很破碎并且无法达到目的。

So in CSS consider adding所以在 CSS 中考虑添加

pointer-events: none;
cursor: default;

Also, instead of using gif files, if you are using fontawesome which everybody uses now a days, consider using in your html另外，如果您使用现在每个人都使用的 fontawesome，而不是使用 gif 文件，请考虑在您的 html 中使用

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

Answer 5

Element making ajax call can call loading(targetElementId) method as below to put loading/icon in target div and it'll get over written by ajax results when ready.进行ajax调用的元素可以调用loading(targetElementId)方法，如下所示将loading/icon放入目标div，准备好后会被ajax结果覆盖。 This works great for me.这对我很有用。

<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 6

HTML page HTML页面

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

Script脚本

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

Answer 7

firstly, in your main page use a loading icon首先，在您的主页中使用加载图标

then, delete your </body> and </HTML> from your main page and replace it by然后，从主页中删除您的</body>和</HTML>并将其替换为

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

in the footer.php file type :在 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 个解决方案

解决方案1
67 已采纳 2014-05-28 09:20:28

解决方案2
10 2017-08-09 03:58:21

解决方案3
1 2016-09-02 07:21:53

解决方案4
1 2018-08-06 11:39:45

解决方案5
0 2015-10-26 10:41:18

解决方案6
0 2017-07-01 12:12:52

解决方案7
-8 2014-05-28 09:01:53

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

问题描述

7 个解决方案

解决方案1 67 已采纳 2014-05-28 09:20:28

解决方案2 10 2017-08-09 03:58:21

解决方案3 1 2016-09-02 07:21:53

解决方案4 1 2018-08-06 11:39:45

解决方案5 0 2015-10-26 10:41:18

解决方案6 0 2017-07-01 12:12:52

解决方案7 -8 2014-05-28 09:01:53

解决方案1
67 已采纳 2014-05-28 09:20:28

解决方案2
10 2017-08-09 03:58:21

解决方案3
1 2016-09-02 07:21:53

解决方案4
1 2018-08-06 11:39:45

解决方案5
0 2015-10-26 10:41:18

解决方案6
0 2017-07-01 12:12:52

解决方案7
-8 2014-05-28 09:01:53