但是在首次加载的时候,需要加载的资源多,导致页面很慢,有些图片还没加载完,动画就已经执行完了,弄的用户体验很糟糕。
这几天有空闲时间,就想着优化一下,先加载些图片,让用户一开始的时候等待一些时间,用以提高后续的体验。
参考了网上的很多方法,代码如下:
function
(arr) {
preload
var
newimages[];
=
for
(var
i
=
0
; i<
arr.length
; i) { newimages[i]
+
+
=
new
(); newimages[i].
Image
src
arr[i]; } }
=
var
imgs[
=
'
,1
.jpg''
,2
.jpg''
,3
.jpg''
,4
.jpg''
];5
.jpg'preload
(imgs);
图片预加载最常用的方法就是new
一个Image
对象,然后将该对象的src
属性设置为要加载的URL路径,这就实现了图片的预加载。
那怎么判断图片是否真的加载完了呢,可以监听image
的onload
事件和onerror
事件,无论图片加载成功还是失败,都会在这两个事件中调用,我们可以简单的用这个来计数,再判断下和传入的数组长度是否一致。
上面是最简单的预加载图片的方法,下面的稍微修改了下,
function
(arr) {
preload
var
newimages[], loadedimages
=
=
0
;var
postaction
=
(){};
function
var
arr(
=
typeof
arr!
=
"object"
)[arr]
?
:
arr;function
imageloadpost
() { loadedimages;
+
+
if
(loadedimages==
arr.length
) {//
postaction(newimages); } }alert
("图片已经加载完成"
);for
(var
i
=
0
; i<
arr.length
; i) { newimages[i]
+
+
=
new
(); newimages[i].
Image
src
arr[i]; newimages[i].
=
onload
=
() {
function
imageloadpost
(); } newimages[i].onerror
=
() {
function
imageloadpost
(); } }return
{:
done
function
(f
) { postactionf
=
|
|
postaction; } } }var
imgs[
=
'
,1
.jpg''
,2
.jpg''
,3
.jpg''
,4
.jpg''
,5
.jpg''
];6
.jpg'preload
(imgs).done
(function
() {
images
console
.log
(images
.length
); });
上面的那段代码中其实还返回了一个回调函数,用于处理在图片全部预加载完成后的操作。一开始也家了个判断,保证传入的数据都是数组形式。