【JavaScript】圖片載入由模糊變清晰 —— 圖片最佳化

標籤：idt   圖片載入   開發   class   art   onload   載入   span   javascrip   

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

先讓用戶端載入像素小的縮圖：

<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】圖片載入由模糊變清晰 —— 圖片最佳化