标签:
创建一个Image对象:var a=new Image(); 定义Image对象的src: a.src=”xxx.gif”; 这样做就相当于给浏览器缓存了一张图片。
建立图像对象:图像对象名称=new Image([宽度],[高度])
图像对象的属性: border complete height hspace lowsrc name src vspace width
图像对象的事件:onabort onerror onkeydown onkeypress onkeyup onload
需要注意的是:src 属性一定要写到 onload 的后面,否则程序在 IE 中会出错。
‘use strict‘; /** * 预加载图片函数 * @param {Object} images 加载图片的数组或者对象 * @param {Object} callback 全部图片加载完毕后调用的回调函数 * @param {Object} timeout 加载超时的时长 */ function loadImage(images,callback,timeout){ //加载完成图片的计数器 var count = 0; //全部图片加载成功的一个标志位 var success = true; //超时timer的id var timeoutId = 0; //是否加载超时的标志位 var isTimeout = false; //对图片数组(或者对象)进行遍历 for(var key in images) { //过滤prototype上的属性 if(!images.hasOwnProperty(key)){ continue; } //获取每个图片元素 //期望格式是个object:{src:xxx} var item = images[key]; if(typeof item === ‘string‘){ item = iamges[key] = {src:item}; } //如果格式不满足期望,则丢弃那条向下遍历 if( !item || !item.src){ continue; } //计数+1 count++; //设置图片元素的id item.id = ‘__img__‘ + key + getId(); //设置图片元素的img,它是一个Image对象 item.img = window[item.id] = new Image(); doLoad(item); } //遍历完成如果计数位0,则直接返回 if(!count){ callback(success); }else if(timeout) { timeoutId = setTimeout(onTimeout,timeout); } /** * 真正进行图片加载的函数 * @param {Object} item 图片元素对象 */ function doLoad(item){ item.status = ‘loading‘; var img = item.img; //定义图片加载成功的回调函数 img.onload = function(){ success = success & true; item.status = ‘loaded‘; done(); }; //定义图片加载失败的回调函数 img.onerror = function(){ success = false; item.status = ‘error‘; done(); }; // 发起了一个http(s)发起请求 img.src = item.src; /** * 每张图片加载完成的回调函数 */ function done(){ img.onload = img.onerror = null; try{ delete window[item.id]; }catch(e){ } /** * 每张图片加载完成,计数器减一,当所有图片加载完成且没有超时的情况清除超时技数器 */ if(!--count && !isTimeout) { clearTimeout(timeoutId); callback(success); } } } /** * 超时函数 */ function onTimeout(){ isTimeout = true ; callback (false) } } var __id = 0; function getId(){ return ++_id; } module.exports = loadImage;
标签:
原文地址:http://www.cnblogs.com/chenjinxinlove/p/5585904.html