隨著移動互聯網的發展和智能手機用戶的大量增長，用戶對網站響應速度的要求越來越高，對于需要同時加載多張圖片的網頁，加載速度往往成為用戶體驗的瓶頸。為了解決這一問題，javascript 合并圖片成為了一種常見的優化方式。本文將介紹 javascript 合并圖片的原理、實現方法和優化建議，并結合實例進行講解。 首先，我們來了解一下 javascript 合并圖片的原理。javascript 合并圖片的核心思想是將多張圖片合并成一張圖片然后再通過 css 樣式調用，減少了瀏覽器向服務器發起多個請求的次數，從而提高了頁面加載速度。對于那些需要顯示大量圖片的網站（比如淘寶）非常有效。 接下來，我們來講一下 javascript 合并圖片的實現方法。具體操作步驟如下： 1. 獲取需要合并的多張圖片的 url，存入一個數組中。 2. 使用 canvas 新建一個畫布，該畫布的大小應該足夠容納所有圖片。通過設置畫布大小和繪制圖片使得所有圖片均勻地分布在畫布中。 3. 使用 toDataURL() 方法將畫布轉換成一個 base64 編碼的字符串，這個字符串就是合并后的圖片。將這個字符串保存在一個變量中（比如 imgData）。 4. 在 css 中，利用 background-image 屬性引入合并后的圖片，通過設置 background-position 來顯示所需的圖片部位。 接下來我們用一個實例來演示相應代碼的實現，以下代碼使用的是 jquery：

$(document).ready(function(){
var imgs = [
"http://example.com/image1.png",
"http://example.com/image2.png",
"http://example.com/image3.png"
];
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var imgDatas = [];
$.each(imgs, function(i, src){
var img = new Image();
img.src = src;
img.onload = function(){
canvas.width += img.width;
if(i==0)
canvas.height = img.height;
ctx.drawImage(img, canvas.width - img.width, 0, img.width, img.height);
if(i == imgs.length-1){
var imgData = canvas.toDataURL();
imgDatas.push(imgData);
$("div").each(function(index, element){
$(element).css("background", "url("+imgData+") no-repeat -"+canvas.width+"px 0");
$(element).css("width", img.width+"px");
$(element).css("height", img.height+"px");
});
$(canvas).remove();
}
};
});    
});

上述代碼實現了將三張圖片合并后作為背景圖片進行顯示，對于js的初學者而言還是比較難以理解的，下文將進行逐步解釋。 1. 首先定義需要被合并的圖片資源的路徑，存入一個名為 imgs 的數組中。 2. 我們使用 canvas 創建了一個畫布，并利用 getContext() 方法將其轉化為 2D 畫布，使其可以被繪制。

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");

3. 對于 imgs 數組中的每個元素，我們創建了一個 img 對象，設置了其 src 屬性為所需的圖片路徑。在 img 對象的 onload 事件中，我們將其繪制出來。

$.each(imgs, function(i, src){
var img = new Image();
img.src = src;
img.onload = function(){
...
};
});

通過綁定 onload 事件，在圖片加載完成后調用函數。這里 canvas.width += img.width 的作用是在每成功加載一張圖片后就動態調整畫布的寬度，讓每個圖片均勻分布在畫布中。這里需要注意一下的是，在處理第一張圖片時，需要設置畫布的高度。

canvas.width += img.width;
if(i==0)
canvas.height = img.height;

如果已經處理完了 imgs 數組中的所有元素，我們就可以將畫布轉換成 base64 編碼的字符串，并將其作為背景圖片的引用。

var imgData = canvas.toDataURL();
$("div").css("background","url("+imgData+") no-repeat -"+canvas.width+"px 0");

最后我們將畫布從文檔中移除，釋放內存，代碼如下：

$(canvas).remove();

通過使用 javascript 合并圖片，可以很好地解決多張圖片加載過慢的問題。但是，在實現過程中還需要注意一些優化細節，比如將相對較小的圖片合并時需要與其他大圖片進行同步處理，這樣才能達到最佳效果。