前端开发者web前端开发需要掌握 前端开发需要英语数学吗 前端开发者需要的10个sublime插件
移动端页面在图片或要加载的项比较多时，用户等待时间一般比较久，为了提高用户体验，需要在进入页面时加入一个显性loading。在页面一些关键图片用jquery的load()控制loading动画，代码如下：
html 代码片段
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1, user-scalable=no”>
<title>首屏显性加载</title>
<style>
body {
margin:0;
padding:0;
}
#loadingbg {
background-color : #222222;
height : 100%;
width : 100%;
position : fixed;
z-index: 3;
}
#loadingwrap {
height : 20px;
width : 200px;
box-shadow : 0px 0px 10px #111111 inset;
margin: 0 auto;
margin-top: 50vh;
}
#loading {
height : 20px;
width : 0;
text-align: center;
background-color : #C9F76F;
box-shadow : 0px 0px 5px #222 inset;
}
.wrap{
width : 100%;
margin: 0 auto;
}
.bg-img{
width: 100%;
max-width:75vh;
}
</style>
</head>
<body>
<div id=”loadingbg”>
<div id=”loadingwrap”>
<div id=”loading”>loading</div>
</div>
</div>
<div class=”wrap”>
<img class=”bg-img” src=”http://wx.karlew.com/loading/img/1.jpg”>
<img class=”bg-img” src=”http://wx.karlew.com/loading/img/2.jpg”>
<img class=”bg-img” src=”http://wx.karlew.com/loading/img/3.jpg”>
<img class=”bg-img” src=”http://wx.karlew.com/loading/img/4.jpg”>
<img class=”bg-img” src=”http://wx.karlew.com/loading/img/5.jpg”>
<img class=”bg-img” src=”http://wx.karlew.com/loading/img/6.jpg”>
<img class=”bg-img” src=”http://wx.karlew.com/loading/img/7.jpg”>
</div>
<script type=”text/javascript”>
var loadNum = 0;
var imgNum = $(‘.bg-img’).length;
var txtGrad = parseInt(100 / imgNum);
var bgGrad = parseInt(200 / imgNum);
$(‘.bg-img’).each(function () {
//加入complete为了判断图片是否在未绑定load事件就已经加载完成
if ($(this)[0].complete) {
loadNum += 1;
$(“#loading”).text(loadNum * txtGrad + “%”).width(loadNum * bgGrad + “px”)
if (loadNum >= imgNum) {
$(“#loading”).text(“100%”).width(“200px”);
$(“#loadingbg”).animate({ opacity: “0” }, function () {
$(this).hide()
})
}
} else {
$(this).load(function () {
loadNum += 1;
$(“#loading”).text(loadNum * txtGrad + “%”).width(loadNum * bgGrad + “px”)
if (loadNum >= imgNum) {
$(“#loading”).text(“100%”).width(“200px”);
$(“#loadingbg”).animate({ opacity: “0” }, function () {
$(this).hide()
})
}
})
}
})
</script>
</body>
</html>
演示地址（建议在移动端或Toggle device mode下查看）：http://wx.karlew.com/loading/
web前端开发需要掌握的技能 学前端开发需要多久 前端开发需要学啥
» 本文来自：前端开发者 » 《移动端页面添加首屏loading效果》
» 本文链接地址：https://www.rokub.com/5863.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册