总结了一些网页加载进度的实现方式……
1、定时器实现加载进度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器实现进度条</title>
<style>
*{margin:0;padding:0}
.loading{ 100%;height: 100%;position: fixed;left: 0;top:0;z-index: 100;background-color: white;}
.loading .pic{64px;height:64px;background-image: url("images/loading.gif");position: absolute;
left: 0;top:0;bottom:0;right: 0;margin: auto;}
</style>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="loading">
<div class="pic"></div>
</div>
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg">
</body>
<script>
$(function () {
setInterval(function () {
$('.loading').fadeOut();
},3000)
})
// var load = '<div class="loading"> <div class="pic"></div> </div>';
// $('body').append(load);
// $(function () {
// setInterval(function () {
// $('.loading').fadeOut();
// },3000)
// })
</script>
</html>
效果图：
2、通过加载状态事件实现加载进度
readyState定义和用法：
readyState 属性返回当前文档的状态（载入中……）。
该属性返回以下值:
-
uninitialized - 还未开始载入
-
loading - 载入中
-
interactive - 已加载，文档与用户可以开始交互
-
complete - 载入完成
语法：document.readyState
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过加载状态事件来实现加载进度</title>
<style>
*{margin:0;padding:0}
.loading{ 100%;height: 100%;position: fixed;left: 0;top:0;z-index: 100;background-color: white;}
.loading .pic{64px;height:64px;background-image: url("images/loading.gif");position: absolute;left: 0;top:0;bottom:0;right: 0;margin: auto;}
</style>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
document.onreadystatechange = function () {
if(document.readyState == 'complete'){
$('.loading').fadeOut();
}
}
</script>
</head>
<body>
<div class="loading"> <div class="pic"></div></div>
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg">
</body>
</html>
效果图：
