js实现图片预加载 imgpreLoad.js

 
 

  
  // 更新：
 
 
 
 

  
  // 05.27: 1、保证回调执行顺序：error > ready > load；2、回调函数this指向img本身
 
 
 
 

  
  // 04-02: 1、增加图片完全加载后的回调 2、提高性能
 
 
 
 

  
   
 
 
 
 

  
  /**
 
 
 
 

  
   * 图片头数据加载就绪事件 - 更快获取图片尺寸
 
 
 
 

  
   * @version	2011.05.27
 
 
 
 

  
   * @author	TangBin（PS:我不是作者，我只是代码的搬运工）
 
 
 
 

  
   * @see		http://www.planeart.cn/?p=1121
 
 
 
 

  
   * @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 
  
  () 
  
  {
 
 
 
 
  
  
  /*list用来存放onready的函数队列,intervalID用来存放定时器的引用*/
 
 
 
 
	
  
  var 
  
  list 
  
  = 
  
  [], 
  
  intervalId 
  
  = 
  
  null
  
  ,
 
 
 
 

  
   
 
 
 
 
	
  
  // 用来执行队列
 
 
 
 
	
  
  tick 
  
  = 
  
  function 
  
  () 
  
  {
 
 
 
 
		
  
  var 
  
  i 
  
  = 
  
  0
  
  ;
 
 
 
 
		
  
  for 
  
  (; 
  
  i 
  
  < 
  
  list
  
  .
  
  length
  
  ; 
  
  i
  
  ++
  
  ) 
  
  {
 
 
 
 
		  
  
  /*end用来表示onready函数是否执行完必，splice用来删除队列中的项目*/
 
 
 
 
			
  
  list
  
  [
  
  i
  
  ].
  
  end 
  
  ? 
  
  list
  
  .
  
  splice
  
  (
  
  i
  
  --
  
  , 
  
  1
  
  ) 
  
  : 
  
  list
  
  [
  
  i
  
  ]();
 
 
 
 
		
  
  };
 
 
 
 
		
  
  //队列全部执行完成后的清除工作。
 
 
 
 
		
  
  !
  
  list
  
  .
  
  length 
  
  && 
  
  stop
  
  ();
 
 
 
 
	
  
  },
 
 
 
 

  
   
 
 
 
 
	
  
  // 停止所有定时器队列,释放内存中的引用
 
 
 
 
	
  
  stop 
  
  = 
  
  function 
  
  () 
  
  {
 
 
 
 
		
  
  clearInterval
  
  (
  
  intervalId
  
  );
 
 
 
 
		
  
  intervalId 
  
  = 
  
  null
  
  ;
 
 
 
 
	
  
  };
 
 
 
 
  
  
  /**
 
 
 
 

  
    * 闭包
 
 
 
 

  
    * @param:url  图片的路径
 
 
 
 

  
    * @param:ready 图片尺寸就绪的回调函数
 
 
 
 

  
    * @param: load 图片加载完毕的回调函数
 
 
 
 

  
    * @param: err 图片加载出错的回调函数
 
 
 
 

  
    *
 
 
 
 

  
    */
 
 
 
 
	
  
  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
  
  );
 
 
 
 
		
  
  };
 
 
 
 
	
  
  };
 
 
 
 

  
  })();