我想在页面元素完全加载之前向用户显示加载图标。我怎样才能用 javascript 做到这一点，我想用 javascript 而不是 jquery 做到这一点？
Here是一个链接google是怎么做的 我怎样才能做到这一点？ 在 onload 事件或类似的事情上触发一些功能.. 我知道它会像这样或任何其他方式来完成？ 或者有什么活动？
更新 我使用 display 属性做了一些事情，我隐藏了 body 元素，但是 onload 的 body 标签我改变了它的属性，但是在哪里放置加载图标并添加更多的交互性。
【问题讨论】：
标签： javascript html css
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/ - 无超时（用于实际页面）
更新
【讨论】：
将加载程序放入网站的最简单方法。
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;
}
查询：
<script>
jQuery(document).ready(function() {
jQuery('#loading').fadeOut(3000);
});
</script>
【讨论】：
在 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();
【讨论】：
HTML、CSS、JS 都很好，如上述答案所示。但是他们不会阻止用户点击加载器和访问页面。如果页面时间很长，它看起来会被破坏并且无法达到目的。
所以在 CSS 中考虑添加
pointer-events: none;
cursor: default;
此外，如果您使用的是现在每个人都在使用的 fontawesome，而不是使用 gif 文件，请考虑在您的 html 中使用
<i class="fa fa-spinner fa-spin">
【讨论】：
进行ajax调用的元素可以调用如下的loading(targetElementId)方法将loading/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();
}
【讨论】：
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();
});
【讨论】：
首先，在您的主页中使用加载图标
然后，从您的主页中删除您的</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>';
?>
【讨论】：
javascript html 和css，这篇文章没有php 标签。