開發(fā)過程中,一些圖片的展示時,加載很慢很久,后來把圖片縮放壓成縮略圖吧,速度是快了但是模糊不清,如何處理這樣問題,下面就和大家分享一下自己的處理方法。
先讓客戶端加載像素小的縮略圖:
<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;
}
這樣就實現預加載縮略圖,最終顯示像素高的原圖,這樣做的好處是避免用戶長時間等待圖片而跳出或者對產品的煩躁情緒。
我看網上也有用HTML標簽實現這種效果的:
<img src="原圖.jpg" lowsrc="縮略圖.jpg" width="800" height="600" border="0" />
在lowsrc屬性中使用縮略圖,瀏覽器會先加載lowsrc中的圖片,縮略圖尺寸小,放到正常圖片的寬高自然會顯示不清晰,待正常圖片加載完畢,就會顯示大圖。但我試了試一些不同版本的游覽器,沒效果,依舊是直接顯示原圖的。
還有網友說更改圖片本身,gif、PNG圖片用PS保存的時候,最后一步選擇【交錯】,我試了試,沒有【交錯】相關選項啊,可能是我的PS版本過高吧。
本站僅提供存儲服務,所有內容均由用戶發(fā)布,如發(fā)現有害或侵權內容,請
點擊舉報。