用javascript實現圖片模糊到清晰載效果指南
1.背景介紹
在網絡相冊應用中用户查看照片是最樸素的需求,當網絡比較慢的時候查看照片等待的時間是比較長的,用户體驗會很差。
2.現狀
現在加載照片的方法主要有一下兩種:
(1)最原始的方式在html頁面直接用img標籤加載顯示照片。該方法在網絡速度比較慢或者要顯示的照片比較大的'時候會頁面出現空白的等待過程,並且不能開始給用户看到照片大概的情況,用户體驗比較不好。
(2)在html頁面先用img標籤加載顯示照片的縮略圖,同時用javascript隱藏的加載照片的原圖,等照片大圖加載完成後再將原圖顯示到頁面中。以下是流程圖:
3.我們的解決方案
QQ相冊最近做的一些優化方法解決了上訴兩個方法的缺點和滿足了用户查看照片的需求:第一時間看到照片大概情況和儘可能快的看到清晰的原圖。該方法使用縮略圖和原圖同時加載併疊加顯示,先加載縮略圖並拉大顯示,大圖疊加在縮略圖上面同時加載。縮略圖很小通常很快就能給用户看到照片模糊的效果,大圖加載過程中從上往下逐步覆蓋縮略圖,這樣用户就可以看到加載過程中的大圖。
(1)示例圖
如上如所示,本方法的處理步驟是:
1).獲取照片縮略圖和原圖的URL,獲取照片的長和寬;
2).加載並顯示照片縮略圖,將縮略圖按照片的長和寬拉伸顯示,這時用户看到的是模糊的效果;
3).加載並顯示照片原圖,將原圖疊加在縮略圖上面顯示,原圖加載多少就顯示多少,沒有加載的還是顯示縮略圖,逐步將縮略圖覆蓋掉,原圖在加載的過程中用户看到的是照片從模糊到清晰的漸變效果。
4).原圖加載完後,原圖已經全部將縮略圖覆蓋,這時用户看到的是真實的原圖。此時可以隱藏縮略圖防止縮略圖干擾PNG或GIF等有透明效果的圖片顯示。
(2)示例代碼
-
網頁設計黃金配色原則是什麼
身為網頁設計新手的你,是不是還在糾結於你製作的網頁找不到一組完美的配色方案?在本教程中我們將與你分享6條肯定會火,並且“錯不了”的指導方針,你可以按照這些原則把握最基本的色彩規律。現在我們分享的這些原則都不是規則,你會在你的職業生涯中創造出更多的配色...
-
javascript設置創建動態表格的方法
兩種JavaScript動態創建table表格的方法,分享給大家,具體實現如下方法一:最原始的方法,創建一一元素vara1=teElement("table");vara2=teElement("tbody");vara3=teElement("tr");vara4=teElement("td");//開始appendchild()追加各個元素ndChild(a4);ndChild(a3);nd...
-
JavaScript 小型打飛機遊戲實現和原理説明
JavaScript小型打飛機遊戲實現和原理説明玩法説明:上下左右控制移動,空格發彈。每打中一個敵機就加100分,每提升5000分,玩家的飛機的一次發彈數就加一,最多四,被敵機撞到或者讓敵機飛到底部就算輸。。。。演示代碼:http://demo./js/FlyBeat/遊戲目前的功能還是比較簡...
-
Dedecms中常用數據調用的sql語句
本文實例彙總了Dedecms中常用數據調用的'sql語句。分享給大家供大家參考。具體如下:{dede:sqlsql="selectcount(*)ascfromdede_archiveswherechannel=1"}共有文章:[field:c/]篇{/dede:sql}{dede:sqlsql="selectcount(*)ascfromdede_archiveswherechannel=2"}共...