我们在前端页面开发过程中，经常会遇到图片，音频，视频等加载慢问题。这样对用户体验来说体验是很不好的。因此我们可以在页面加载时用一个加载动效来表示，当加载完成的时候，再来显示内容。推荐一个制作进度条的网站
icons8.com/preloaders/ ，制作进入条有以下几种方法。
一：通过定时器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.loading {
position: fixed;
top: 0;
left:0;
width: 100%;
height: 100%;
background: #fff;
z-index: 10;
}
.pic {
position: absolute;
background: url("http://ww4.sinaimg.cn/large/0060lm7Tly1fm2frpsktng301s01smxa.gif") no-repeat center;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
img {
width: 200px;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="http://ww1.sinaimg.cn/large/0060lm7Tly1fm2f9jpyecj30990dwtas.jpg" alt="XX">
</div>
<div class="loading">
<div class="pic"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
$(function () {
setTimeout(function () {
$('.loading').fadeOut();
}, 2000)
})
</script>
</body>
</html>
这种方法实现进度条简单粗暴，但是不是真实的。所以开发中一般不用这个。
二：通过监听页面加载完成事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.loading {
position: fixed;
width: 100%;
height: 100%;
background: #ffffff;
left: 0;
top: 0;
z-index: 100;
}
.pic {
width: 64px;
height: 64px;
background-image: url('./images/image.gif');
background-repeat: no-repeat;
background-position: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
img {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<img src="http://ww4.sinaimg.cn/large/0060lm7Tly1fm2f9oge40j30ty13yahd.jpg" alt="">
<img src="http://ww1.sinaimg.cn/large/0060lm7Tly1fm2f9jpyecj30990dwtas.jpg" alt="">
<div class="loading">
<div class="pic">
</div>
</div>
<script src="./js/jquery.1.9.1.js"></script>
<script>
$(function () {
document.onreadystatechange = function () {
if (document.readyState == 'complete') {
$('.loading').fadeOut();
}
};
})
</script>
</body>
</html>
我们通过jquery来实现，这个方法开发中经常用的。
网友评论