JQuery - Image onLoad 讀取/載入完成事件

2014-11-23 7:42 PM

以下程式碼範例為圖片讀取完成後
淡出原本容器的背景 再淡入背景圖片的效果

程式碼範例

var target  = $(value);
var src  = "/image/cover/thumbnail";
   
$('<img/>').attr('src', src).on("load", function() {
 var base64 = convertImgToBase64( $(this)[0] );
 $(this).remove();

 TweenMax.to(target, 0.5, {
  alpha:0,
  ease:Quad.easeInOut,
  onCompleteParams:[target, base64],
  onComplete:function(t, i){
   t.css("background", "rgba(31, 31, 31, 1) url(" + i + ") no-repeat center center");
   TweenMax.to(t, 1.3, {alpha:1, ease:Quad.easeInOut});
  }
 });
});

function convertImgToBase64(img){
 var canvas  = document.createElement('CANVAS');
 var ctx  = canvas.getContext('2d');
 
 canvas.height  = img.height;
 canvas.width  = img.width;
 ctx.drawImage(img, 0, 0);
 
 var dataURL = canvas.toDataURL();
 canvas = null; 
 
 return dataURL;
}

詳細解說

// 取得要加入背景圖片的物件
var target  = $("#coverDiv");
// 設定URL
var src  = "/image/cover/thumbnail";
 
// 建立圖片讀取及暫存物件  
$('<img/>').attr('src', src).on("load", function() {
 // 讀取完成後將圖片轉換為base64編碼
 // 以防止瀏覽器無設定快取時造成圖片重複讀取
 var base64 = cmc.util.convertImgToBase64( $(this)[0] );

 // 避免佔用記憶體
 $(this).remove();

 // 再將base64編碼指定至background url即可
 // 此處為加入動畫釋例 
 // 完成讀取後使用淡出原本背景 -> 淡入圖片背景效果
 TweenMax.to(target, 0.5, {
  alpha:0,
  ease:Quad.easeInOut,
  onCompleteParams:[target, base64],
  onComplete:function(t, u){
   t.css("background", "rgba(31, 31, 31, 1) url(" + u + ") no-repeat center center");
   TweenMax.to(t, 1.3, {alpha:1, ease:Quad.easeInOut});
  }
 });
});

// 將圖片物件轉換為base64編碼
function convertImgToBase64(img){
 // 首先建立canvas物件 必須使用到cavas物件的方法
 var canvas  = document.createElement('CANVAS');
 // 設定內容為2D
 var ctx  = canvas.getContext('2d');
 
 // 將cavas的寬高設定為與圖片相同
 canvas.height  = img.height;
 canvas.width  = img.width;

 // 繪製圖片至cavas內
 ctx.drawImage(img, 0, 0);
 
 // 使用cavas的toDataURL功能轉換為base64編碼
 var dataURL = canvas.toDataURL();

 // 清除cavas物件
 canvas = null; 
 
 return dataURL;
}

各項資料連結

JQuery 官方網站
Base64 - 維基百科