再谈JavaScript图片预加载技术

推荐专题：JavaScript学习笔记有问有答

创新互联主打移动网站、成都网站制作、成都网站建设、外贸营销网站建设、网站改版、网络推广、网站维护、域名与空间、等互联网信息服务，为各行业提供服务。在技术实力的保障下，我们为客户承诺稳定，放心的服务，根据网站的内容与功能再决定采用什么样的设计。最后，要实现符合网站需求的内容、功能与设计，我们还会规划稳定安全的技术方案做保障。

一段典型的使用预加载获取图片大小的例子：

 
 
 
  
  
  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;    
  
  };    
  
  };    
  
     
  
  };

可以看到使用onload的方式必须等待图片加载完毕，其速度不敢恭维。

web应用程序区别于桌面应用程序，响应速度才是最好的用户体验。如果想要速度与优雅兼得，那就必须提前获得图片尺寸，如何在图片没有加载完毕就能获取图片尺寸?

十多年的上网经验告诉我：浏览器在加载图片的时候你会看到图片会先占用一块地然后才慢慢加载完毕，并且这里大部分的图片都是没有预设width与height属性的，因为浏览器能够获取图片的头部数据。基于此，只需要使用javascript定时侦测图片的尺寸状态便可得知图片尺寸就绪的状态。

实现代码：

 
 
 
  
  
  var imgReady = function (url, callback, error) {    
  
  var width, height, intervalId, check, div,    
  
  img = new Image(),    
  
  body = document.body;    
  
     
  
  img.src = url;    
  
     
  
  // 从缓存中读取    
  
  if (img.complete) {    
  
  return callback(img.width, img.height);    
  
  };    
  
     
  
  // 通过占位提前获取图片头部数据    
  
  if (body) {    
  
  div = document.createElement('div');    
  
  div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden';    
  
  div.appendChild(img)    
  
  body.appendChild(div);    
  
  width = img.offsetWidth;    
  
  height = img.offsetHeight;    
  
     
  
  check = function () {    
  
  if (img.offsetWidth !== width || img.offsetHeight !== height) {    
  
  clearInterval(intervalId);    
  
  callback(img.offsetWidth, img.clientHeight);    
  
  img.onload = null;    
  
  div.innerHTML = '';    
  
  div.parentNode.removeChild(div);    
  
  };    
  
  };    
  
     
  
  intervalId = setInterval(check, 150);    
  
  };    
  
     
  
  // 加载完毕后方式获取    
  
  img.onload = function () {    
  
  callback(img.width, img.height);    
  
  img.onload = img.onerror = null;    
  
  clearInterval(intervalId);    
  
  body && img.parentNode.removeChild(img);    
  
  };    
  
     
  
  // 图片加载错误    
  
  img.onerror = function () {    
  
  error && error();    
  
  clearInterval(intervalId);    
  
  body && img.parentNode.removeChild(img);    
  
  };    
  
     
  
  };

是不是很简单?这样的方式获取摄影级别照片尺寸的速度往往是onload方式的几十多倍，而对于web普通(800×600内)浏览级别的图片能达到秒杀效果。

好了，请观赏令人愉悦的 DEMO ，通过测试的浏览器：Chrome、Firefox、Safari、Opera、IE6、IE7、IE8。

原文链接：http://www.planeart.cn/?p=1121

分享标题：再谈JavaScript图片预加载技术
文章起源：http://www.csdahua.cn/qtweb/news14/547664.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：快上网

成都快上网为您推荐相关内容