資訊專欄INFORMATION COLUMN
摘要：圖片的預(yù)加載是提升用戶體驗而損失性能的一種做法，而懶加載的性能就比較好了，所以將兩個結(jié)合起來放到程序中是一種不錯的選擇。
最近在做H5滑頁時，遇到一些比較大的場景，動輒二十、三十頁，而圖片更是可恨的能達到上百個，所以就會導(dǎo)致場景在加載的時候遇到網(wǎng)速比較慢的時候，用戶等待的時間特別長，這樣的話，就有可能導(dǎo)致一部分的用戶沒有耐心，而丟失這部分用戶，于是就有了這里的圖片的預(yù)加載和懶加載，記個筆記，如果后邊用到了，還可以來看看。
圖片的預(yù)加載是提升用戶體驗而損失性能的一種做法，而懶加載的性能就比較好了，所以將兩個結(jié)合起來放到web程序中是一種不錯的選擇。在用戶剛進入場景的時候，先加載幾頁的圖片，開始顯示給用戶，然后在用戶每翻一頁時，再相應(yīng)的加載后面對應(yīng)的一頁中的圖片，這樣，如果用戶看了幾頁不想看了，后邊的圖片就不用加載了，減輕了服務(wù)器的壓力。而相應(yīng)的，用戶在進入場景時，等待的時間也減少了許多。
代碼：
html
preloadByCss
通過chrome的調(diào)試工具分析網(wǎng)絡(luò)
在chrome的調(diào)試工具中，可以進行測試，這樣是否可以進行加載，代碼如下：
在通過chrome的調(diào)試工具中的網(wǎng)絡(luò)分析欄，可以看到確實發(fā)送了請求，并且也得到了圖片
圖片的加載就可以正常進行了，利用Image對象同時也可以加載css、javascript
返回的數(shù)據(jù)
關(guān)于預(yù)加載的三種方式可以查看CSDN中的文章：http://www.csdn.net/article/2013-10-15/2817187-3-ways-preload-images-c...
懶加載的實現(xiàn)懶加載在一些大型的網(wǎng)站中見到的比較多，因為網(wǎng)站考慮到性能、流量及用戶體驗方面的問題，在用戶點擊開網(wǎng)站的首頁的時候，網(wǎng)站想盡可能的顯示更多的信息給用戶，又要考慮到服務(wù)器的性能的問題，還不能讓用戶等待的時間過長，所以這里就出現(xiàn)了圖片的懶加載。圖片的懶加載可以讓用戶按照需求從服務(wù)器上加載圖片，這樣即節(jié)省了用戶在代開首頁時的等待時間，也節(jié)省了服務(wù)器的流量，所以是一個好的選擇。懶加載的基本思路就是不給img標(biāo)簽寫src屬性，而是寫到一個后邊可以操作的屬性中，如data-src中，然后在后邊需要加載的時候，加載圖片，圖片地址寫到src中。
如下面的這段代碼：
html
lazyload Demo
如果需要這個img顯示的時候，直接讓這個img顯示，然后把這個img的data-src給src就可以完成圖片的懶加載。
讓代碼運行，然后打開chrome的調(diào)試工具，然后查看網(wǎng)絡(luò)發(fā)現(xiàn)這里并沒有對這個圖片進行加載：
然后在點擊圖片，發(fā)現(xiàn)：
這樣原理上就實現(xiàn)了圖片的懶加載，但是在實際的生產(chǎn)環(huán)境中，肯定不會是這么簡單的，去點擊一個按鈕，然后讓圖片加載出來，大多數(shù)的應(yīng)用場景都是，圖片到了要顯示的屏幕中了，然后在去加載，或者說再差一點就要到屏幕中，然后開始加載。
在實際的生產(chǎn)環(huán)境中考慮到自己寫的預(yù)加載和懶加載的代碼的性能不高等問題，這里就可以采用createJS中的preload.js和jquery.lazyload.js兩個插件完成資源的預(yù)加載和懶加載。
[preload.js官網(wǎng)]：http://createjs.com/preloadjs
[lazyload.js官網(wǎng)]：http://www.appelsiini.net/projects/lazyload
用法基本上看文檔就可以了，在使用的過程中遇到的一個問題就是如何判斷懶加載已經(jīng)加載完成了，在網(wǎng)上沒有找到相關(guān)的資料（請原諒我太菜），自己就稍微看了下源碼，發(fā)現(xiàn)其中有一個load的參數(shù)，然后給它指定一個回調(diào)函數(shù)，在函數(shù)中執(zhí)行加載完成要執(zhí)行的代碼就可以了。
本人的JS水平實在是太菜了，請見諒。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85884.html
摘要：教程所示圖片使用的是倉庫圖片，網(wǎng)速過慢的朋友請移步原文系列教程七提取和懶加載。個人技術(shù)小站有空就來看看我一直都在本節(jié)課講解在中的提取和懶加載。值得一提的是，和在的懶加載上的處理方法有著巨大差別。 教程所示圖片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請移步>>> （原文）webpack4 系列教程(七): SCSS 提取和懶加載。 個人技術(shù)小站: https://godbmw.c...
摘要：最近閱讀了很多優(yōu)秀的網(wǎng)站性能優(yōu)化的文章，所以自己也想總結(jié)一些最近優(yōu)化的手段和方法。個人感覺性能優(yōu)化的核心是減少延遲，加速展現(xiàn)。初步以為是這個功能導(dǎo)致的服務(wù)掛起，詢問相關(guān)操作人員，得到當(dāng)時的操作過程。 最近閱讀了很多優(yōu)秀的網(wǎng)站性能優(yōu)化的文章，所以自己也想總結(jié)一些最近優(yōu)化的手段和方法。 個人感覺性能優(yōu)化的核心是：減少延遲，加速展現(xiàn)。 本文主要從產(chǎn)品設(shè)計、前端、后端和網(wǎng)絡(luò)四個...
摘要：本節(jié)課講解打包單頁應(yīng)用過程中的代碼分割和代碼懶加載。不同于多頁面應(yīng)用的提取公共代碼，單頁面的代碼分割和懶加載不是通過配置來實現(xiàn)的，而是通過的寫法和內(nèi)置函數(shù)實現(xiàn)的。個人網(wǎng)站原文鏈接系列教程四單頁面解決方案代碼分割和懶加載 本節(jié)課講解webpack4打包單頁應(yīng)用過程中的代碼分割和代碼懶加載。不同于多頁面應(yīng)用的提取公共代碼，單頁面的代碼分割和懶加載不是通過webpack配置來實現(xiàn)的，而是通過...
摘要：雪碧圖內(nèi)聯(lián)圖片將站內(nèi)小圖標(biāo)合并成一張圖，使用定位截取對應(yīng)圖標(biāo)適當(dāng)使用內(nèi)聯(lián)圖片。瀏覽器緩存合理設(shè)置瀏覽器緩存是網(wǎng)頁優(yōu)化的重要手段之一。為什么要減少請求在性能優(yōu)化中減少請求的措施占了很大部分，比如使用雪碧 這篇文章主要介紹了淺談網(wǎng)頁基本性能優(yōu)化規(guī)則小結(jié)的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 針對瀏覽器網(wǎng)頁的一些優(yōu)化規(guī)則 頁面優(yōu)化 靜態(tài)資源壓縮...
閱讀 1491·2023-04-25 19:51
閱讀 1954·2019-08-30 15:55
閱讀 1782·2019-08-30 15:44
閱讀 2720·2019-08-30 13:58
閱讀 2720·2019-08-29 16:37
閱讀 1099·2019-08-29 15:34
閱讀 4057·2019-08-29 11:05
閱讀 2656·2019-08-28 17:51
