實現圖片加載從模糊到清晰顯示的方法
阿新 • • 發佈：2018-10-18
file ram 設置 render xhtml mimetype small wing alt
1.通過代碼控制
QQ相冊最近做的一些優化方法解決了上訴兩個方法的缺點和滿足了用戶查看照片的需求：第一時間看到照片大概情況和盡可能快的看到清晰的原圖。該方法使用縮略圖和原圖同時加載並疊加顯示，先加載縮略圖並拉大顯示，大圖疊加在縮略圖上面同時加載。縮略圖很小通常很快就能給用戶看到照片模糊的效果，大圖加載過程中從上往下逐步覆蓋縮略圖，這樣用戶就可以看到加載過程中的大圖。
如上如所示，本方法的處理步驟是：
1).獲取照片縮略圖和原圖的URL，獲取照片的長和寬；
2).加載並顯示照片縮略圖，將縮略圖按照片的長和寬拉伸顯示，這時用戶看到的是模糊的效果；
3).加載並顯示照片原圖，將原圖疊加在縮略圖上面顯示，原圖加載多少就顯示多少，沒有加載的還是顯示縮略圖，逐步將縮略圖覆蓋掉，原圖在加載的過程中用戶看到的是照片從模糊到清晰的漸變效果。
4).原圖加載完後，原圖已經全部將縮略圖覆蓋，這時用戶看到的是真實的原圖。此時可以隱藏縮略圖防止縮略圖幹擾PNG或GIF等有透明效果的圖片顯示。
<!--設置照片的大小-->
<div style="width:400px;height:300px;">
<!--小圖拉大顯示-->
<img src="small_url" style="width:100%;height:100%;"/>
<!--原圖疊加在小圖上面-->
<img src="big_url" style="width:100%;height:100%;position:absolute;top:0px;left:0px;"/>
</div>
2.通過圖片本身的加載方式
漸進式JPEG創建
using (Image source = Image.FromFile(@"D:\temp\test2.jpg")) {
ImageCodecInfo codec = ImageCodecInfo.GetImageEncoders().First(c => c.MimeType == "image/jpeg");
EncoderParameters parameters = new EncoderParameters(3);
parameters.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L);
parameters.Param[1] = new EncoderParameter(System.Drawing.Imaging.Encoder.ScanMethod, (int)EncoderValue.ScanMethodInterlaced);
parameters.Param[2] = new EncoderParameter(System.Drawing.Imaging.Encoder.RenderMethod, (int)EncoderValue.RenderProgressive);
source.Save(@"D:\temp\saved.jpg", codec, parameters);
} 實現圖片加載從模糊到清晰顯示的方法