【案例】preload無序加載
標(biāo)簽：
JavaScript
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
list-style:none;
text-decoration: none;
}
.box{
margin: 150px 0 0 200px;
}
#face-btn{
display: inline-block;
font-size: 20px;
color: #333;
}
.panel{
width: 900px;
padding:2px;
border:1px solid #000;
background: #fff;
display: none;
}
.list{
width: 100%;
float: left;
}
.list li{
display: inline-block;
float: left;
}
.list li img{
float: left;
}
</style>
</head>
<body>
<div class="box">
<a href="javascript:;" id="face-btn">表情</a>
<div class="panel">
<p class="loading">表情加载中......</p>
<ul class="list">
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/qq/01.gif" alt=""></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/qq/02.gif" alt=""></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/qq/03.gif" alt=""></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/qq/04.gif" alt=""></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/qq/05.gif" alt=""></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/qq/06.gif" alt=""></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/qq/07.gif" alt=""></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/qq/08.gif" alt=""></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/qq/09.gif" alt=""></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/qq/10.gif" alt=""></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/qq/11.gif" alt=""></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/qq/12.gif" alt=""></li>
<li><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/qq/13.gif" alt=""></li>
</ul>
</div>
</div>
</body>
</html>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="preload.js"></script>
<script>
var images=[
'https://img1.sycdn.imooc.com//5a379dfb0001285609360316.jpg',
'https://img1.sycdn.imooc.com//5a39e2f50001aebb09360316.jpg',
'https://img1.sycdn.imooc.com//5a1b70e800010c0809360316.jpg',
'https://img1.sycdn.imooc.com//5a2fb8c10001505309360316.jpg',
'https://img1.sycdn.imooc.com//5a33ae35000170a409360316.jpg'
];
var $btn=$("#face-btn"),
$panel=$(".panel");
var imgs=[];
for(var i=0;i<13;i++){
imgs[i]='img/qq/'+(i+1)+'.gif';
}
var len=imgs.length;
$btn.on("click",function () {
$panel.show();
preLoad.init("#imgLoad",{
picture:images,
count:0,
number:100,
/*preload.js调用方法(each,all)的时候，传递counter*/
each:function (counter) {
$(".progress").html(Math.round((counter+1)/(this.picture.length)*100)+'%')
},
all:function (counter) {
if(counter>=(this.picture.length)-1){
$(".loading").hide();
document.title="1/"+this.picture.length;
}
}
})
})
</script>
var preLoad=(function(){
function Preload(el,options){
this.$el=$(el);
this.$progress=this.$el.find(".progress");
this.$opts=options;
}
Preload.prototype.init=function(){
this.loading();
}
Preload.prototype.loading=function(){
var self=this,
opts=self.$opts,
photo=opts.picture,
len=photo.length,
counter=opts.count;
//num=opts.number;
// $.each(photo,function(i,val){
// var newImg = new Image();
// $(newImg).on("load",function(){
// self.$progress.html(Math.round((counter+1)/len*num)+'%');
// if(counter>=len-1){
// self.$el.hide();
// document.title="1/"+len;
// }
// counter++;
// })
// newImg.src=val;
// });
$.each(photo,function (i,val) {
var imgObj = new Image();
$(imgObj).on('load',function () {
/*加载图片*/
opts.each && opts.each(counter);
/*全部加载完毕以后*/
if(counter>=len-1){
opts.all && opts.all(counter);
}
counter++;
})
imgObj.src=val;
})
}
var init=function(el,options){
new Preload(el,options).init();
}
return {
init:init
}
})();
417214rsa點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦