成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

切圖崽的自我修養(yǎng)－優(yōu)化圖片加載流程

AaronYuan / 796人閱讀

摘要：前言優(yōu)化又是優(yōu)化切圖崽們作為整個應(yīng)用的紐帶，連接著用戶行為和機器性能而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點對于圖片資源的加載來說，更是如此今天我們就來簡單說說，項目開發(fā)中常見的圖片加載優(yōu)化方式預(yù)加載遮罩大法我們經(jīng)常用中實際上

前言 
優(yōu)化！ 又是優(yōu)化！

切圖崽們作為整個web應(yīng)用的紐帶，連接著用戶行為和機器性能. 而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點.

對于圖片資源的加載來說，更是如此. 今天我們就來簡單說說，項目開發(fā)中常見的圖片加載優(yōu)化方式.

預(yù)加載 1.遮罩大法

我們經(jīng)常用jquery, jquery中$(function){})實際上是DOMContentLoaded事件完成的回調(diào)，只是完成了DOM樹的構(gòu)建. 諸如Css的渲染以及頁面內(nèi)圖片等資源的下載不一定完成了.所以如果此時呈現(xiàn)頁面，頁面會非常難看.

為了解決這個問題，為了從設(shè)計和行為的角度提高用戶體驗，我們可以在圖片等重要資源完全下載完之前，對頁面加上較為美觀的遮罩，并且彈出loading提示告知用戶資源正在loading.等到圖片完全加載完，才移除遮罩和加載動畫.

具體的實現(xiàn)思路如下:

$(function(){})調(diào)用之后，先彈出蒙板加上loading動畫用來提示用戶正在loading中

對頁面中需要預(yù)加載的IMG元素進行下載var img = new Image(); img.src="xx.jpg"

圖片下載完成會有一個onload的回調(diào)img.onload = function(){...}

在這個回調(diào)中移除loading動畫以及遮罩

這樣就可以給用戶帶來順滑如絲般的操作體驗了，再也不用擔心用戶看到那些正在下載的未顯示完全的丑的要死圖片了.

我們的口號是: 要么就不給你看，要么就給你看最好的
應(yīng)用場景: 請在"首屏中存在圖片的動畫，或者和你對接的UI設(shè)計師極其強勢"的情況下使用

2.有碼大法

有碼大法和遮罩大法略微有區(qū)別,具體實現(xiàn)思路如下:

首先對你需要預(yù)加載的圖片準備兩張,一張是高清一張低清. 比如girl_hd大小為60kb. 另一張是girl, 大小是6kb.

html頁面中需要預(yù)加載的image標簽的src地址寫的是低清的地址

因為低清圖很小，很快就能被加載出來.

$(function(){})調(diào)用之后，獲取頁面需要高清替換的img的src(girl.jpg),以此src為基準拼接字符串(+"_hd.jpg")獲得高清圖的地址(girl_hd.jpg)，然后用下載該高清圖var img = new Image(); img.src=“girl_hd.jpg”

圖片下載完成會有一個onload的回調(diào)img.onload = function(){...}

回調(diào)中替換掉頁面中img的src, 所以現(xiàn)在頁面上的image標簽為

我們的口號是: 想看無碼高清，請先看有碼低清
應(yīng)用場景: 請在"首屏中出現(xiàn)大量圖片，且尺寸都不小"的情況下使用

懶加載

如果你仔細看了上面預(yù)加載的思路，一定往我腦袋上拍磚: 遮罩大法也好，有碼大法也好，這并沒有提高項目的加載速度啊，最后該下載的圖片還不是得下載. 沒錯，懶加載只是改變了用戶的操作感受，實際上項目的加載速度并沒有提高. 但是，現(xiàn)在要說的懶加載，可是實實在在的提高了項目的加載速度哦.

什么是懶加載，一句話來解釋， 就是圖片按需加載.

大家一定刷過微博，微博的照片墻就是懶加載的最佳示例.一開始顯示的照片并不多，只有用戶下拉，拉到底部的位置， 照片墻才會被拉長，新的圖片才會被加載.

操作思路:

監(jiān)聽滾動條scroll事件(當然touchmove事件也可以)

每次事件觸發(fā)的時候，判斷當前照片墻的位置

如果照片墻已經(jīng)被刷到了底部某個臨界位置點

Js下載新出現(xiàn)的圖片，var img = new Image(); img.src="xx.jpg"

下載完成有一個onload的回調(diào)img.onload = function(){...}

在下載完成的回調(diào)中向頁面中插入已經(jīng)下載好的圖片

當然，根據(jù)項目不同，會有各種各樣的懶加載方式.但核心是不變的:即頁面初始加載的時候，只加載滿足用戶需求的最小數(shù)量的資源. 拿照片墻舉例，可能用戶的微博里有500張照片，如果你在頁面加載的時候就加載500張，用戶會卡到爆炸(因為后臺一直處于圖片下載狀態(tài)). 如果頁面加載的時候只初始加載20張圖片，其他的圖片通過用戶自己的操作(滾動下拉)，來按需加載，會極大提升項目運行的流暢程度.

結(jié)語

雖然預(yù)加載還是懶加載實現(xiàn)原理都非常簡單，給我的啟示確是巨大的:

預(yù)加載除了改善用戶的操作感受，其深層次的核心其實在于:對資源進行碎片化加載, 即預(yù)加載其實可以出現(xiàn)在任何時間段，當用戶鼠標很長時間沒移動的時候，我可不可以偷偷下載兩張圖片？在用戶目前沒有進行大量運算操作的時候，我可不可以偷偷下載兩張圖片？當用戶當前在一個很精簡的登陸界面的時候，我可不可以偷偷下載他登陸成功跳轉(zhuǎn)到的頁面的幾張圖片？等等等等

懶加載的深層次核心在于:按需, 按需這個詞已經(jīng)被深深刻在我腦子里了. 現(xiàn)在回想起來，很多很多優(yōu)化方式都是圍繞著按需來展開的. 按需加載Js,按需加載圖片等等
首先，我們必須保證項目第一時間的加載速度，能讓用戶在最短的時間內(nèi)看到頁面和內(nèi)容.

其次，盡量保證當前頁面的精簡程度，不去做無意義的加載. 只有當用戶真正需要時，我們才展現(xiàn)給他.

各自的優(yōu)缺點在于:

預(yù)加載：

優(yōu)點:如果提前下好了圖片，等到這張圖片需要用到時，可以秒開.

缺點:下載圖片的時候會影響項目的加載完成時間，會影響項目運行的流暢程度

懶加載在于:

優(yōu)點: 保證用戶加載的項目是最精簡的，最快的， 所下載資源是最少的

缺點: 如果用戶的操作觸發(fā)了懶加載，那么需要等待資源下載到完成的時間,同時資源下載期間,操作流暢度降低

說到底，項目的優(yōu)化是沒有銀彈的，這一部分的高效很可能導(dǎo)致另一部分的低效.A項目的優(yōu)化方法照搬來B項目可能一文不值.
所以我們切圖崽們能做的，就是深刻理解這些技術(shù)的原理，并且在項目中吸收經(jīng)驗，只有深刻地理解了各項技術(shù)的優(yōu)劣，只有深刻的理解了用戶的需求以及行為習(xí)慣，才能針對特定的項目，特定的場景，進行最適合的處理.

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79922.html

相關(guān)文章

  • 切圖崽的自我修養(yǎng)－優(yōu)化圖片加載流程

    摘要：前言優(yōu)化又是優(yōu)化切圖崽們作為整個應(yīng)用的紐帶，連接著用戶行為和機器性能而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點對于圖片資源的加載來說，更是如此今天我們就來簡單說說，項目開發(fā)中常見的圖片加載優(yōu)化方式預(yù)加載遮罩大法我們經(jīng)常用中實際上 前言 優(yōu)化！ 又是優(yōu)化！ 切圖崽們作為整個web應(yīng)用的紐帶，連接著用戶行為和機器性能. 而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點. ...

    ygyooo 評論0 收藏0

  • 切圖崽的自我修養(yǎng)－優(yōu)化圖片加載流程

    摘要：前言優(yōu)化又是優(yōu)化切圖崽們作為整個應(yīng)用的紐帶，連接著用戶行為和機器性能而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點對于圖片資源的加載來說，更是如此今天我們就來簡單說說，項目開發(fā)中常見的圖片加載優(yōu)化方式預(yù)加載遮罩大法我們經(jīng)常用中實際上 前言 優(yōu)化！ 又是優(yōu)化！ 切圖崽們作為整個web應(yīng)用的紐帶，連接著用戶行為和機器性能. 而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點. ...

    xiaochao 評論0 收藏0

  • 切圖崽的自我修養(yǎng)－提高項目加載速度

    摘要：前言我的項目沒問題，是用戶的網(wǎng)絡(luò)環(huán)境不夠好前端作為一個最貼近用戶的技術(shù)工種，毫無疑問應(yīng)該把戶體驗放在第一位而用戶體驗，基本正比于頁面的打開速度，特別是做移動端的同學(xué)，所以如何優(yōu)化自己的項目，提高頁面的加載速度成為重中之重資源的下載及解析對前 前言 我的項目沒問題，是用戶的網(wǎng)絡(luò)環(huán)境不夠好 前端作為一個最貼近用戶的技術(shù)工種，毫無疑問應(yīng)該把戶體驗放在第一位. 而用戶體驗，基本正比于頁面的打開...

    yanwei 評論0 收藏0

  • 切圖崽的自我修養(yǎng)－[BUILD] webpack體驗記錄

    摘要：體驗記錄大法好退保平安打包工具前端工程化一直是前端的一塊重點之前構(gòu)建工具的選擇上，公司也是很早之前就從收攏為的確是個好工具，作為工具核心的依賴表是非常好的構(gòu)建思路，也是很多大公司一直在用的構(gòu)建工具但是個人用的非常不習(xí)慣生態(tài)不是很好它太大太重 Webpack體驗記錄 webpack大法好 退fis保平安 打包工具前端工程化一直是前端的一塊重點.之前構(gòu)建工具的選擇上，公司也是很早之前就從g...

    ZHAO_ 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<