【JavaScript】圖片加載由模糊變清晰 —— 圖片優化

開發過程中，一些圖片的展示時，加載很慢很久，后來把圖片縮放壓成縮略圖吧，速度是快了但是模糊不清，如何處理這樣問題，下面就和大家分享一下自己的處理方法。 

先讓客戶端加載像素小的縮略圖：

<img src="縮略圖.jpg" name="pic" width="800" height="600" id="news" />

然后用js處理：

var img = new Image();//新建一個圖片對象 
img.src = "原圖.jpg"; //最終顯示的大圖
img.onload = function() { 
  document.getElementById('news').src = this.src; 
}

示例代碼

<img src="images/playboy-s.jpg" name="myImage" width="960" height="1285" id="myImage"  alt="懶人圖庫" />

<script language="JavaScript" type="text/javascript">
    var img = new Image();
    img.src = "images/playboy-b.jpg";
    img.onload = function() {
        document.getElementById('myImage').src = this.src;
    }
</script>

playboy-s是縮略圖，playboy-b是完整圖

這樣就實現預加載縮略圖，最終顯示像素高的原圖，這樣做的好處是避免用戶長時間等待圖片而跳出或者對產品的煩躁情緒。

原文地址:http://www.ibloger.net/article/403.html