javascript图片预加载完整实例

本文实例讲述了javascript图片预加载的方法。分享给大家供大家参考，具体如下：
<！DOCTYPE ><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>图片预加载</title></head><body><img id="song" width="300" src="http://www.baidu.com/img/bdlogo.gif" _src="http://p2009c.zbjimg.com/task/2009-12/03/188273/middlexznxwkia.gif" /></body></html><script type="text/javascript"> //默认图片 var defurl = "http://www.baidu.com/img/bdlogo.gif"; //一张大尺寸图片 var imgurl = "http://www.planeart.cn/demo/imgReady/vistas24.jpg"; //一张gif图片 var gifurl = "http://p2009c.zbjimg.com/task/2009-12/03/188273/middlexznxwkia.gif"; //图片预加载 function loadImage（url, callback） {var img = new Image（）; //创建一个Image对象，实现图片的预下载img.onload = function（）{ img.onload = null;//gif图片在ie下会循环请求 callback（img）;}img.src = url; } var img = document.getElementById（"song"）; var url = img.getAttribute（"_src"） loadImage（gifurl,function（）{//alert（"ok"）;img.src = url; }） /*** 网络上通用的图片预加载函数* @param url* @param callback*/ var imgLoad = function （url, callback） {var img = new Image（）;img.src = url;if （img.complete） { callback（img.width, img.height）;} else { img.onload = function （） {callback（img.width, img.height）;img.onload = null; };}; }; // 更新： // 05.27: 1、保证回调执行顺序：error > ready > load；2、回调函数this指向img本身 // 04-02: 1、增加图片完全加载后的回调 2、提高性能 /*** 图片头数据加载就绪事件 - 更快获取图片尺寸** 原理：没有缓存的情况下，用计时器不断验证图片的大小是否发生变化，如果不在变化则为ready*如果有缓存则w3c浏览器会调用 complete，ie则会走 onload，都不在走 计时器那部分** @version 2011.05.27* @author TangBin* @param {String} 图片路径* @param {Function} 尺寸就绪* @param {Function} 加载完毕 （可选）* @param {Function} 加载错误 （可选）* @example imgReady（"http://www.google.com.hk/intl/zh-CN/images/logo_cn.png", function （） {alert（"size ready: width=" + this.width + "; height=" + this.height）;}）;*/ var imgReady = （function （） {var list = [], intervalId = null, // 用来执行队列 tick = function （） {var i = 0;for （; i < list.length; i++） { list[i].end ? list.splice（i--, 1） : list[i]（）;};！list.length && stop（）; }, // 停止所有定时器队列 stop = function （） {clearInterval（intervalId）;intervalId = null; };return function （url, ready, load, error） { var onready, width, height, newWidth, newHeight,img = new Image（）; img.src = url; // 如果图片被缓存，则直接返回缓存数据 if （img.complete） {ready.call（img）;load && load.call（img）;return; } ; width = img.width; height = img.height; // 加载错误后的事件 img.onerror = function （） {error && error.call（img）;onready.end = true;img = img.onload = img.onerror = null; }; // 图片尺寸就绪 onready = function （） {newWidth = img.width;newHeight = img.height;if （newWidth ！== width || newHeight ！== height || // 如果图片已经在其他地方加载可使用面积检测 newWidth * newHeight > 1024 ） { ready.call（img）; onready.end = true;}; }; onready（）; // 完全加载完毕的事件 img.onload = function （） { // onload在定时器时间差范围内可能比onready快// 这里进行检查并保证onready优先执行！onready.end && onready（）;load && load.call（img）;// IE gif动画会循环执行onload，置空onload即可img = img.onload = img.onerror = null; };// 加入队列中定期执行 if （！onready.end） {list.push（onready）;// 无论何时只允许出现一个定时器，减少浏览器性能损耗if （intervalId === null） intervalId = setInterval（tick, 40）; } ;}; }）（）; var img_url = "http://www.planeart.cn/demo/imgReady/vistas24.jpg"; imgReady（img_url, function （） {//console.info（this.width）;//console.info（this.height）;alert（this.width + "
" + this.height）;document.getElementById（"song"）.src = img_url; }）</script>
希望本文所述对大家JavaScript程序设计有所帮助。