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

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

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

然后用js處理：

var img = new Image();//新建一個(gè)圖片對(duì)象 
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是完整圖

這樣就實(shí)現(xiàn)預(yù)加載縮略圖，最終顯示像素高的原圖，這樣做的好處是避免用戶長時(shí)間等待圖片而跳出或者對(duì)產(chǎn)品的煩躁情緒。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。