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

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

<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

總結

以上是生活随笔為你收集整理的【JavaScript】图片加载由模糊变清晰 —— 图片优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。