前端圖片延遲加載詳細講解

 

        本來是打算昨天昨天下午的時候就寫一篇關於前端圖片延遲加載的詳細技術的博客的，沒想到下午公司項目出現了一些問題，因此一直在改代碼進行調試，今天白天一成天又在外面跑，回來已經傍晚了，剛吃完飯，就想着趕忙補上，這樣不少不懂這方面具體實現的小夥伴們也能早點學習經驗。

         前端頁面的用戶體驗對於一個網站來講是相當重要的，咱們在訪問一些圖片量比較大的網站的時候，每每會有這樣的感覺：顯示在我電腦屏幕可視區域的圖片老是不能及時的刷出來，這就形成了對於一些沒有什麼耐心的用戶而言，他們就不肯意多等下去，索性直接關閉了網站去看其餘的網站，這就使得本網站的用戶量的流失，這每每是一個網站最不肯意看到的狀況，那麼對於這樣的狀況而言，開發者們不斷的努力，很快就想到了解決的方案，讓在可視區域的圖片當即加載進來，而讓不在可視區域而且須要經過滾動條進行滾動顯示的圖片在圖片滾動到可視區域內再顯示出來，這就比一次性把全部的圖片資源加載進來從而形成圖片刷新較慢的用戶體驗好的多的多。

        那麼，圖片延遲加載的技術具體如何實現呢？下面來作詳細的介紹:

        首先，定義圖片爲三列，一共有5行，具體代碼以下：                 

       裏面用到的bootstrap的佈局技術（固然，這不是重點），請看img標籤中的src,一開始咱們並無給它具體的圖片的資源路徑，而是本身定義了一個屬性 x-src，該屬性的值是圖片圖片的資源路徑，每一行的img都是如此，接下來，當頁面載入的時候，咱們使用jquery(固然，你想javascript原生的代碼也能夠，我這裏只是爲了省時間而已)來循環遍歷每個img，判斷每個圖片是否在當前可視區域內，是則顯示圖片，不然稍後處理，這裏須要知道三個數據：

             注：由於我所寫的是當圖片的一半進入的瀏覽器的可視區域內纔將這張圖片進行加載，因此須要第三個數據，這個看我的的需求是什麼，       若是你的需求是圖片只要已進入可視區域內就加載，可直接忽略第三個數據!!!!

                                   1：瀏覽器可視區域的高度

                                   2：圖片相對於文檔的偏移量（這裏只須要高度上的偏移量）

                                   3：圖片元素自己的高度

             若是圖片先對於文檔的偏移量+圖片元素自己的高度的一半    <  瀏覽器可視區域的高度，即代表圖片已經有一半進入的可視區域了，那麼我就應該要把這張圖片加載進來了，但是img標籤的src是爲空的，x-src的值纔是圖片的資源路徑，這個時候就須要用jquery將img 標籤的x-src值傳給src，從而將圖片加載進來，具體實現代碼以下：

                    

             具體的效果以下：

                      

           你能夠在控制檯看到，雖然咱們有5行圖片,每行有3列，但加載進來的圖片只有第一列（圖片高度有超出一半的img纔會加載圖片的資源進來），其餘的都沒有加載進來，這就使得圖片的刷新會很快出現效果，那麼接下來，用戶須要看到更多的圖片，這個時候須要進行滾動條往下滾動，去刷新更多的圖片，那麼這個時候咱們除了上述的3個數據以外，還須要知道當前滾動條滾動的距離，若是：

                              圖片先對於文檔的偏移量+圖片元素自己的高度的一半    <  瀏覽器可視區域的高度  + 當前滾動條滾動的距離，那麼代表當前圖片已經在可視區域內，而且圖片有一半以上的高度是在可視區域內，那麼將圖片進行加載進來，具體代碼以下：

                    

           具體效果以下：

                    

          在控制檯你能夠看到，隨着滾動條的滾動，加載進來的圖片由原來的三張變成了如今的六張，滾動條不斷的往下滾動，圖片就會不斷的加載進來，從而獲得更好的用戶體驗。

          這就是圖片延遲加載的具體實現，是否是以爲圖片的炫酷，若是你想本身看下具體的實現效果，能夠點擊個人網址進行查看：

                                    http://meichao.sinaapp.com/show.html

 原文連接：http://www.gbtags.com/gb/share/6366.htm?