国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

圖片的預加載和懶加載

SwordFly / 3351人閱讀

摘要：圖片的預加載是提升用戶體驗而損失性能的一種做法，而懶加載的性能就比較好了，所以將兩個結合起來放到程序中是一種不錯的選擇。

最近在做H5滑頁時，遇到一些比較大的場景，動輒二十、三十頁，而圖片更是可恨的能達到上百個，所以就會導致場景在加載的時候遇到網速比較慢的時候，用戶等待的時間特別長，這樣的話，就有可能導致一部分的用戶沒有耐心，而丟失這部分用戶，于是就有了這里的圖片的預加載和懶加載，記個筆記，如果后邊用到了，還可以來看看。
圖片的預加載是提升用戶體驗而損失性能的一種做法，而懶加載的性能就比較好了，所以將兩個結合起來放到web程序中是一種不錯的選擇。在用戶剛進入場景的時候，先加載幾頁的圖片，開始顯示給用戶，然后在用戶每翻一頁時，再相應的加載后面對應的一頁中的圖片，這樣，如果用戶看了幾頁不想看了，后邊的圖片就不用加載了，減輕了服務器的壓力。而相應的，用戶在進入場景時，等待的時間也減少了許多。

預加載的實現 將圖片寫到css中，讓圖片不顯示

代碼：

html


    
    preloadByCss

通過chrome的調試工具分析網絡

在js中通過new Image對象，然后指定Image的src，通過Image的src還可以加載css、javascript

在chrome的調試工具中，可以進行測試，這樣是否可以進行加載，代碼如下：

在通過chrome的調試工具中的網絡分析欄，可以看到確實發送了請求，并且也得到了圖片

圖片的加載就可以正常進行了，利用Image對象同時也可以加載css、javascript

返回的數據

使用ajax預加載，使用ajax的時候不僅可以加載圖片，還可以加載css、javascript。

關于預加載的三種方式可以查看CSDN中的文章：http://www.csdn.net/article/2013-10-15/2817187-3-ways-preload-images-c...

懶加載的實現

懶加載在一些大型的網站中見到的比較多，因為網站考慮到性能、流量及用戶體驗方面的問題，在用戶點擊開網站的首頁的時候，網站想盡可能的顯示更多的信息給用戶，又要考慮到服務器的性能的問題，還不能讓用戶等待的時間過長，所以這里就出現了圖片的懶加載。圖片的懶加載可以讓用戶按照需求從服務器上加載圖片，這樣即節省了用戶在代開首頁時的等待時間，也節省了服務器的流量，所以是一個好的選擇。懶加載的基本思路就是不給img標簽寫src屬性，而是寫到一個后邊可以操作的屬性中，如data-src中，然后在后邊需要加載的時候，加載圖片，圖片地址寫到src中。
如下面的這段代碼：

html


    
    lazyload Demo

如果需要這個img顯示的時候，直接讓這個img顯示，然后把這個img的data-src給src就可以完成圖片的懶加載。
讓代碼運行，然后打開chrome的調試工具，然后查看網絡發現這里并沒有對這個圖片進行加載：

然后在點擊圖片，發現：

這樣原理上就實現了圖片的懶加載，但是在實際的生產環境中，肯定不會是這么簡單的，去點擊一個按鈕，然后讓圖片加載出來，大多數的應用場景都是，圖片到了要顯示的屏幕中了，然后在去加載，或者說再差一點就要到屏幕中，然后開始加載。

實際生產環境中的使用

在實際的生產環境中考慮到自己寫的預加載和懶加載的代碼的性能不高等問題，這里就可以采用createJS中的preload.js和jquery.lazyload.js兩個插件完成資源的預加載和懶加載。
[preload.js官網]：http://createjs.com/preloadjs
[lazyload.js官網]：http://www.appelsiini.net/projects/lazyload
用法基本上看文檔就可以了，在使用的過程中遇到的一個問題就是如何判斷懶加載已經加載完成了，在網上沒有找到相關的資料（請原諒我太菜），自己就稍微看了下源碼，發現其中有一個load的參數，然后給它指定一個回調函數，在函數中執行加載完成要執行的代碼就可以了。

后記

本人的JS水平實在是太菜了，請見諒。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85884.html

相關文章

  • webpack4 系列教程(七): SCSS提取和懶加載

    摘要：教程所示圖片使用的是倉庫圖片，網速過慢的朋友請移步原文系列教程七提取和懶加載。個人技術小站有空就來看看我一直都在本節課講解在中的提取和懶加載。值得一提的是，和在的懶加載上的處理方法有著巨大差別。 教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步>>> （原文）webpack4 系列教程(七): SCSS 提取和懶加載。 個人技術小站: https://godbmw.c...

    崔曉明 評論0 收藏0

  • Web優化躬行記（5）——網站優化

    摘要：最近閱讀了很多優秀的網站性能優化的文章，所以自己也想總結一些最近優化的手段和方法。個人感覺性能優化的核心是減少延遲，加速展現。初步以為是這個功能導致的服務掛起，詢問相關操作人員，得到當時的操作過程。　　最近閱讀了很多優秀的網站性能優化的文章，所以自己也想總結一些最近優化的手段和方法。 　　個人感覺性能優化的核心是：減少延遲，加速展現。 　　本文主要從產品設計、前端、后端和網絡四個...

    233jl 評論0 收藏0

  • webpack4 系列教程(四): 單頁面解決方案--代碼分割和懶加載

    摘要：本節課講解打包單頁應用過程中的代碼分割和代碼懶加載。不同于多頁面應用的提取公共代碼，單頁面的代碼分割和懶加載不是通過配置來實現的，而是通過的寫法和內置函數實現的。個人網站原文鏈接系列教程四單頁面解決方案代碼分割和懶加載 本節課講解webpack4打包單頁應用過程中的代碼分割和代碼懶加載。不同于多頁面應用的提取公共代碼，單頁面的代碼分割和懶加載不是通過webpack配置來實現的，而是通過...

    jackwang 評論0 收藏0

  • 淺談網頁基本性能優化規則小結

    摘要：雪碧圖內聯圖片將站內小圖標合并成一張圖，使用定位截取對應圖標適當使用內聯圖片。瀏覽器緩存合理設置瀏覽器緩存是網頁優化的重要手段之一。為什么要減少請求在性能優化中減少請求的措施占了很大部分，比如使用雪碧 這篇文章主要介紹了淺談網頁基本性能優化規則小結的相關資料，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 針對瀏覽器網頁的一些優化規則 頁面優化 靜態資源壓縮...

    Aomine 評論0 收藏0

發表評論

0條評論

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