資訊專欄INFORMATION COLUMN
摘要：前言優化又是優化切圖崽們作為整個應用的紐帶，連接著用戶行為和機器性能而優化的最終意義，在于在這兩者之間取得一個最佳的平衡點對于圖片資源的加載來說，更是如此今天我們就來簡單說說，項目開發中常見的圖片加載優化方式預加載遮罩大法我們經常用中實際上
前言
優化！ 又是優化！
切圖崽們作為整個web應用的紐帶，連接著用戶行為和機器性能. 而優化的最終意義，在于在這兩者之間取得一個最佳的平衡點.
對于圖片資源的加載來說，更是如此. 今天我們就來簡單說說，項目開發中常見的圖片加載優化方式.
我們經常用jquery, jquery中$(function){})實際上是DOMContentLoaded事件完成的回調，只是完成了DOM樹的構建. 諸如Css的渲染以及頁面內圖片等資源的下載不一定完成了.所以如果此時呈現頁面，頁面會非常難看.
為了解決這個問題，為了從設計和行為的角度提高用戶體驗，我們可以在圖片等重要資源完全下載完之前，對頁面加上較為美觀的遮罩，并且彈出loading提示告知用戶資源正在loading.等到圖片完全加載完，才移除遮罩和加載動畫.
具體的實現思路如下:
$(function(){})調用之后，先彈出蒙板加上loading動畫用來提示用戶正在loading中
對頁面中需要預加載的IMG元素進行下載var img = new Image(); img.src="xx.jpg"
圖片下載完成會有一個onload的回調img.onload = function(){...}
在這個回調中移除loading動畫以及遮罩
這樣就可以給用戶帶來順滑如絲般的操作體驗了，再也不用擔心用戶看到那些正在下載的未顯示完全的丑的要死圖片了.
我們的口號是: 要么就不給你看，要么就給你看最好的
應用場景: 請在"首屏中存在圖片的動畫，或者和你對接的UI設計師極其強勢"的情況下使用
有碼大法和遮罩大法略微有區別,具體實現思路如下:
首先對你需要預加載的圖片準備兩張,一張是高清一張低清. 比如girl_hd大小為60kb. 另一張是girl, 大小是6kb.
html頁面中需要預加載的image標簽的src地址寫的是低清的地址
因為低清圖很小，很快就能被加載出來.
$(function(){})調用之后，獲取頁面需要高清替換的img的src(girl.jpg),以此src為基準拼接字符串(+"_hd.jpg")獲得高清圖的地址(girl_hd.jpg)，然后用下載該高清圖var img = new Image(); img.src=“girl_hd.jpg”
圖片下載完成會有一個onload的回調img.onload = function(){...}
回調中替換掉頁面中img的src, 所以現在頁面上的image標簽為 
我們的口號是: 想看無碼高清，請先看有碼低清
應用場景: 請在"首屏中出現大量圖片，且尺寸都不小"的情況下使用
如果你仔細看了上面預加載的思路，一定往我腦袋上拍磚: 遮罩大法也好，有碼大法也好，這并沒有提高項目的加載速度啊，最后該下載的圖片還不是得下載. 沒錯，懶加載只是改變了用戶的操作感受，實際上項目的加載速度并沒有提高. 但是，現在要說的懶加載，可是實實在在的提高了項目的加載速度哦.
什么是懶加載，一句話來解釋， 就是圖片按需加載.
大家一定刷過微博，微博的照片墻就是懶加載的最佳示例.一開始顯示的照片并不多，只有用戶下拉，拉到底部的位置， 照片墻才會被拉長，新的圖片才會被加載.
操作思路:
監聽滾動條scroll事件(當然touchmove事件也可以)
每次事件觸發的時候，判斷當前照片墻的位置
如果照片墻已經被刷到了底部某個臨界位置點
Js下載新出現的圖片，var img = new Image(); img.src="xx.jpg"
下載完成有一個onload的回調img.onload = function(){...}
在下載完成的回調中向頁面中插入已經下載好的圖片
當然，根據項目不同，會有各種各樣的懶加載方式.但核心是不變的:即頁面初始加載的時候，只加載滿足用戶需求的最小數量的資源. 拿照片墻舉例，可能用戶的微博里有500張照片，如果你在頁面加載的時候就加載500張，用戶會卡到爆炸(因為后臺一直處于圖片下載狀態). 如果頁面加載的時候只初始加載20張圖片，其他的圖片通過用戶自己的操作(滾動下拉)，來按需加載，會極大提升項目運行的流暢程度.
雖然預加載還是懶加載實現原理都非常簡單，給我的啟示確是巨大的:
預加載除了改善用戶的操作感受，其深層次的核心其實在于:對資源進行碎片化加載, 即預加載其實可以出現在任何時間段，當用戶鼠標很長時間沒移動的時候，我可不可以偷偷下載兩張圖片？在用戶目前沒有進行大量運算操作的時候，我可不可以偷偷下載兩張圖片？當用戶當前在一個很精簡的登陸界面的時候，我可不可以偷偷下載他登陸成功跳轉到的頁面的幾張圖片？等等等等
懶加載的深層次核心在于:按需, 按需這個詞已經被深深刻在我腦子里了. 現在回想起來，很多很多優化方式都是圍繞著按需來展開的. 按需加載Js,按需加載圖片等等
首先，我們必須保證項目第一時間的加載速度，能讓用戶在最短的時間內看到頁面和內容.
其次，盡量保證當前頁面的精簡程度，不去做無意義的加載. 只有當用戶真正需要時，我們才展現給他.
各自的優缺點在于:預加載：
優點:如果提前下好了圖片，等到這張圖片需要用到時，可以秒開.
缺點:下載圖片的時候會影響項目的加載完成時間，會影響項目運行的流暢程度
懶加載在于:
優點: 保證用戶加載的項目是最精簡的，最快的， 所下載資源是最少的
缺點: 如果用戶的操作觸發了懶加載，那么需要等待資源下載到完成的時間,同時資源下載期間,操作流暢度降低
說到底，項目的優化是沒有銀彈的，這一部分的高效很可能導致另一部分的低效.A項目的優化方法照搬來B項目可能一文不值.
所以我們切圖崽們能做的，就是深刻理解這些技術的原理，并且在項目中吸收經驗，只有深刻地理解了各項技術的優劣，只有深刻的理解了用戶的需求以及行為習慣，才能針對特定的項目，特定的場景，進行最適合的處理.
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49918.html
摘要：前言優化又是優化切圖崽們作為整個應用的紐帶，連接著用戶行為和機器性能而優化的最終意義，在于在這兩者之間取得一個最佳的平衡點對于圖片資源的加載來說，更是如此今天我們就來簡單說說，項目開發中常見的圖片加載優化方式預加載遮罩大法我們經常用中實際上 前言 優化！ 又是優化！ 切圖崽們作為整個web應用的紐帶，連接著用戶行為和機器性能. 而優化的最終意義，在于在這兩者之間取得一個最佳的平衡點. ...
摘要：前言優化又是優化切圖崽們作為整個應用的紐帶，連接著用戶行為和機器性能而優化的最終意義，在于在這兩者之間取得一個最佳的平衡點對于圖片資源的加載來說，更是如此今天我們就來簡單說說，項目開發中常見的圖片加載優化方式預加載遮罩大法我們經常用中實際上 前言 優化！ 又是優化！ 切圖崽們作為整個web應用的紐帶，連接著用戶行為和機器性能. 而優化的最終意義，在于在這兩者之間取得一個最佳的平衡點. ...
摘要：前言我的項目沒問題，是用戶的網絡環境不夠好前端作為一個最貼近用戶的技術工種，毫無疑問應該把戶體驗放在第一位而用戶體驗，基本正比于頁面的打開速度，特別是做移動端的同學，所以如何優化自己的項目，提高頁面的加載速度成為重中之重資源的下載及解析對前 前言 我的項目沒問題，是用戶的網絡環境不夠好 前端作為一個最貼近用戶的技術工種，毫無疑問應該把戶體驗放在第一位. 而用戶體驗，基本正比于頁面的打開...
摘要：體驗記錄大法好退保平安打包工具前端工程化一直是前端的一塊重點之前構建工具的選擇上，公司也是很早之前就從收攏為的確是個好工具，作為工具核心的依賴表是非常好的構建思路，也是很多大公司一直在用的構建工具但是個人用的非常不習慣生態不是很好它太大太重 Webpack體驗記錄 webpack大法好 退fis保平安 打包工具前端工程化一直是前端的一塊重點.之前構建工具的選擇上，公司也是很早之前就從g...
閱讀 746·2023-04-26 01:30
閱讀 3301·2021-11-24 10:32
閱讀 2179·2021-11-22 14:56
閱讀 1979·2021-11-18 10:07
閱讀 553·2019-08-29 17:14
閱讀 624·2019-08-26 12:21
閱讀 3103·2019-08-26 10:55
閱讀 2940·2019-08-23 18:09
