image-preload

图片预加载——显示加载进度

usage

1
2
3
4
5
6
7
8
/**
@param imageArr:预先加载的图片数组,
@param config:
@param update:每加载一张执行一次update函数
@param complete:加载完成所有图片执行该函数
@param silent:true//表示使用默认的加载样式
*/

ImageLoader(imageArr,config)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>imageloader</title>
<script type="text/javascript" src="../imageloader.js"></script>
<link rel="stylesheet" type="text/css" href="../imageloader.css">
</head>
<body>
<h2 style="text-align:center">imageloader demo</h2>
<div id="imageContainer"></div>
<script type="text/javascript">
var imagesArr = ['./images/buy_domain.png','./images/dusk.jpg','./images/malaysia_dusk.jpg','./images/malaysia_sea.jpg'];
var updateFn = function(){
var img = document.createElement('IMG');
img.setAttribute('src',arguments[2]);
document.getElementById('imageContainer').appendChild(img);
}
ImageLoader(imagesArr,{update:updateFn,complete:function(){
alert('All images loaded.');
},silent:true});
</script>

</body>
</html>

源码地址:https://github.com/navyxie/imageloader

粤ICP备18054847号-2
本站总访问量次 本站访客数人 本文总阅读量
{% if theme.baidu_push %} {% endif %}