javascript图片预加载完整实例【javascript】

   //默认图片 var defurl = 'http://www.baidu.com/img/bdlogo.jpg'; //一张大尺寸图片 var imgurl = 'http://www.planeart.cn/demo/imgReady/vistas24.jpg'; //一张gif图片 var gifurl = 'http://p2009c.zbjimg.com/task/2009-12/03/188273/middlexznxwkia.jpg'; //图片预加载 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.jpg', function () {alert('size ready: width=' + this.width + '; height=' + this.height);});  */ var imgReady = (function () {  var list = [], intervalId = null,   // 用来执行队列   tick = function () {    var i = 0;    for (; i  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 + '\n' + this.height);  document.getElementById('song').src = img_url; })