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

Question

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

31

我想在页面元素完全加载之前向用户展示一个加载图标。我该如何用JavaScript实现，且不使用jQuery？这里是Google的做法。我该怎么做呢？是否要在onload事件或类似的事件中触发某些函数？还是有其他方法可以实现？或者有专门的事件可以处理这个问题吗？ 更新：我使用display属性做了一些东西，隐藏了body元素，在body标签的onload事件中更改它的属性。但是我不知道在哪里放置加载图标并增加更多的交互。

- Sky

7个回答

14

最简单的方式将加载器放入网站。

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>

- Mahendra pratap singh ahada

5

OP明确表示“不使用jQuery”。 - prashant

2

HTML、CSS、JS都是上面回答中提到的好方法。然而，它们无法阻止用户点击加载器并访问页面。如果页面加载时间很长，页面会看起来不正常，失去了意义。因此，在CSS中考虑添加以下内容：

pointer-events: none;
cursor: default;

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

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

- Uma Shankar Goel

2

在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;
        }

使用此代码。

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

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

- RJ CR

1

制作 AJAX 调用的元素可以调用以下 loading(targetElementId) 方法，将加载/图标放入目标 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();
}

- Moji

1

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();
});

- Devil

-6

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

然后，从您的主页面中删除</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>';
?>

- angel

OP要求JavaScript解决方案。 - Viscocent

我想在页面加载完成之前显示一个加载（预加载）图标。当页面完全加载后，我想用HTML元素（页面内容）替换加载图标。 - Sky

这是一个 JavaScript 函数，它将更改图标！我只是展示如何调用该函数以执行他想要的操作。 - angel

3

@angel，这篇文章被标记为“javascript”、“html”和“css”，但没有“php”标签。 - Viscocent

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Viscocent · Accepted Answer

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("/loading.gif") no-repeat center center rgba(0,0,0,0.25)
}

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

演示

http://jsfiddle.net/6AcAr/ - 带有timeout(仅用于演示)
http://jsfiddle.net/47PkH/ - 无timeout(实际页面使用)

更新

http://jsfiddle.net/d9ngT/