Javascript实现图片预加载【回调函数,多张图片】
2015-08-07 17:39
561 查看
使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果。此时程序中就会涉及多张图片预加载代码。当接二连三的案例中都涉及图片预加载时,就需要考虑把这个功能封装为一个通用方法。
(1)下面为JS实现图片预加载方法loadImages():
Js代码
![](http://taro.iteye.com/images/icon_star.png)
//实现一系列图片的预加载
//参数sources:图片信息关联数组
//参数callback:回调函数——图片预加载完成后立即执行此函数。
function loadImages(sources, callback){
var count = 0,
images ={},
imgNum = 0;
for(src in sources){
imgNum++;
}
for(src in sources){
images[src] = new Image();
images[src].onload = function(){
if(++count >= imgNum){
callback(images);
}
}
images[src].src = sources[src];
}
}
(2)在JS中调用预加载函数:
Js代码
![](http://taro.iteye.com/images/icon_star.png)
//存储图片链接信息的关联数组
var sources = {
ietoHell : "img/IEtoHell.jpg",
fuckIE : "img/fuckIE.jpg"
};
//调用图片预加载函数,实现回调函数
loadImages(sources, function(images){
//TO-DO something
ctx.drawImage(images.ietoHell, 20,20,100,100);
ctx.drawImage(images.fuckIE, 140,20,100,100);
});
注意事项:
(1)先绑定image.onload事件,后加载图片
Js代码
![](http://taro.iteye.com/images/icon_star.png)
images[src] = new Image();
images[src].onload = function(){
if(++count >= imgNum){
callback(images);
}
}
images[src].src = sources[src];
原因:如果图片从缓存中加载,速度非常快以至于没来得及绑定事件就加载完毕,自然不会触发绑定事件。
(2)for...in循环 与 for循环的区别
for循环用于迭代数组(array)
for...in循环用于迭代对象(object, {})或者关联数组(hash array)
(1)下面为JS实现图片预加载方法loadImages():
Js代码
![](http://taro.iteye.com/images/icon_star.png)
//实现一系列图片的预加载
//参数sources:图片信息关联数组
//参数callback:回调函数——图片预加载完成后立即执行此函数。
function loadImages(sources, callback){
var count = 0,
images ={},
imgNum = 0;
for(src in sources){
imgNum++;
}
for(src in sources){
images[src] = new Image();
images[src].onload = function(){
if(++count >= imgNum){
callback(images);
}
}
images[src].src = sources[src];
}
}
(2)在JS中调用预加载函数:
Js代码
![](http://taro.iteye.com/images/icon_star.png)
//存储图片链接信息的关联数组
var sources = {
ietoHell : "img/IEtoHell.jpg",
fuckIE : "img/fuckIE.jpg"
};
//调用图片预加载函数,实现回调函数
loadImages(sources, function(images){
//TO-DO something
ctx.drawImage(images.ietoHell, 20,20,100,100);
ctx.drawImage(images.fuckIE, 140,20,100,100);
});
注意事项:
(1)先绑定image.onload事件,后加载图片
Js代码
![](http://taro.iteye.com/images/icon_star.png)
images[src] = new Image();
images[src].onload = function(){
if(++count >= imgNum){
callback(images);
}
}
images[src].src = sources[src];
原因:如果图片从缓存中加载,速度非常快以至于没来得及绑定事件就加载完毕,自然不会触发绑定事件。
(2)for...in循环 与 for循环的区别
for循环用于迭代数组(array)
for...in循环用于迭代对象(object, {})或者关联数组(hash array)
相关文章推荐
- js代码 1970开始的秒数转成日期
- JavaScript Promise使用
- JSONModel解析数据成Model
- AFNetworking Post Raw Data(JSON)
- ExtJS 多文件上传
- JavaScript Hack set/get
- 规则引擎快速导出jsp页面实现计算器
- JSP内置对象
- <jsp:include>和<%@include%>的区别
- 访问者行为追踪比较——Web服务器日志与JavaScript页面标记
- 12个JavaScript MVC框架评估
- 说说JSON和JSONP 也许你会豁然开朗
- 点击小图片显示相应的大图片的js的实现
- Fiddler调试线上JS代码
- JAVASCRIPT——正则表达式
- JS 变量或参数是否有值的判断
- JSON解析笔记
- javascript对象拷贝
- js 半角
- json与xml的比较