1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
| <!DOCTYPE html>
<html>
<head>
<title>图片预加载之无序加载</title>
<meta charset="utf-8">
<style type="text/css">
*{padding: 0; margin:0;}
html,body{
height: 100%
}
a{text-decoration: none;}
.box{
text-align: :center;
}
.btn{
display: inline-block;
height: 30px;
line-height: 30px;
border: 1px solid #ccc;
background-color: #fff;
padding:0 10px;
margin-right: 50px;
color: #333;
}
.btn:hover{
background-color: #eee
}
.loading{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #eee;
text-align: center;
font-size: 30px;
}
.progress{
margin-top: 300px;
}
</style>
</head>
<body>
<div class="box">
<img id="img" src="http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg" width="1200"></img>
<p>
<a href="javscript:;" class="btn" data-control='prev'>上一页</a>
<a href="javscript:;" class="btn" data-control='next'>下一页</a>
</p>
</div>
<div class="loading">
<div class="progress">
0%
</div>
</div>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="preload.js"></script>
<script type="text/javascript">
var imgs = [
'http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg',
'http://img.dwstatic.com/ls/ls20170411_bg.jpg',
'http://img.article.pchome.net/00/44/23/20/pic_lib/wm/2.jpg',
'http://lcd.yesky.com/imagelist/2009/044/404q4y8g4m0p.jpg',
'http://pc.duowan.com/uploads/allimg/2009-11/16101540-6-4k952.jpg',
'http://lcd.yesky.com/imagelist/2009/044/cgro54wt2t2x.jpg'
]
//不用插件的写法
/*var index = 0;
var len = imgs.length;
var count = 0;
$progress = $('.progress')
$.each(imgs,function(i,src){
var imgObj = new Image();
imgObj.src = src;
//无论是否加载成功 都会继续循环，否则如果有一张加载不出来就没法进行了
//下面是加载图片的回调 让load页走完
$(imgObj).on('load error',function(){
//每完成一次count++
$progress.html(Math.round((count+1)/len * 100)+'%');
if(count >= len -1){
$('.loading').hide();
document.title = '1/'+len;
}
count++;
})
})
$('.btn').on('click',function(){
if($(this).data('control') === 'prev'){
//判断index 是否小于0 小于返回0 不小于返回index;Math.max返回较大的那个
index = Math.max(0,--index)
}
else
{
index = Math.min(++index,len-1)
}
document.title = (index+1)+'/'+len;
$("#img").attr('src',imgs[index])
})*/
//用插件的写法
var index = 0;
var len = imgs.length;
$progress = $('.progress')
$.PreLoad(imgs,{
all:"ordered",//有序加载
each:function(count){ //每一张加载完执行的函数
$progress.html(Math.round((count+1)/len * 100)+'%');
},
all:function(){ //所有图片加载完执行的函数
$('.loading').hide();
document.title = '1/'+len;
}
})
//如果用不用JQURY插件调用 preload.js需要删除外边的大闭包 后面注释掉挂载到$.extend的方法
/* $(function(){
new PreLoad(imgs,{
each:function(count){
$progress.html(Math.round((count+1)/len * 100)+'%');
},
all:function(){
$('.loading').hide();
document.title = '1/'+len;
}
})
})*/
/*//有序加載，加載完第一張然後第二張，類似于漫畫
var len = imgs.length,
count = 0;
orderLoad();
function orderLoad(){
var imgObj = new Image();
$(imgObj).on("load error",function(){
count++;
if(count >= len){
//所有图片加载完毕
}else
{
orderLoad();
}
})
imgObj.src = imgs[count]
}*/
$('.btn').on('click',function(){
if($(this).data('control') === 'prev'){
//判断index 是否小于0 小于返回0 不小于返回index;Math.max返回较大的那个
index = Math.max(0,--index)
}
else
{
index = Math.min(++index,len-1)
}
document.title = (index+1)+'/'+len;
$("#img").attr('src',imgs[index])
})
</script>
</body>
</html>
|