顯示在瀏覽器可視區(qū)域的圖片總是不能及時(shí)的刷出來，讓在可視區(qū)域的圖片立即加載進(jìn)來，而讓不在可視區(qū)域并且需要通過滾動(dòng)條進(jìn)行滾動(dòng)顯示的圖片在圖片滾動(dòng)到可視區(qū)域內(nèi)再顯示出來

        原本是打算昨天昨天下午的時(shí)候就寫一篇關(guān)于前端圖片延遲加載的詳細(xì)技術(shù)的博客的，沒想到下午公司項(xiàng)目出現(xiàn)了一些問題，所以一直在改代碼進(jìn)行調(diào)試，今天 白天一整天又在外面跑，回來已經(jīng)傍晚了，剛吃完飯，就想著趕緊補(bǔ)上，這樣很多不懂這方面具體實(shí)現(xiàn)的小伙伴們也能早點(diǎn)學(xué)習(xí)經(jīng)驗(yàn)。

         前端頁面的用戶體驗(yàn)對于一個(gè)網(wǎng)站來說是至關(guān)重要的，我們在訪問一些圖片量比較大的網(wǎng)站的時(shí)候，往往會有這樣的感受：顯示在我電腦 屏幕可視區(qū)域的圖片總是不能及時(shí)的刷出來，這就造成了對于一些沒有什么耐心的用戶而言，他們就不愿意多等下去，索性直接關(guān)閉了網(wǎng)站去看其他的網(wǎng)站，這就使 得本網(wǎng)站的用戶量的流失，這往往是一個(gè)網(wǎng)站最不愿意看到的情況，那么對于這樣的情況而言，開發(fā)者們不斷的努力，很快就想到了解決的方案，讓在可視區(qū)域的圖 片立即加載進(jìn)來，而讓不在可視區(qū)域并且需要通過滾動(dòng)條進(jìn)行滾動(dòng)顯示的圖片在圖片滾動(dòng)到可視區(qū)域內(nèi)再顯示出來，這就比一次性把所有的圖片資源加載進(jìn)來從而造 成圖片刷新較慢的用戶體驗(yàn)好的多的多。

         那么，圖片延遲加載的技術(shù)具體如何實(shí)現(xiàn)呢？下面來做詳細(xì)的介紹:

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

        里面用到的bootstrap的 布局技術(shù)（當(dāng)然，這不是重點(diǎn)），請看img標(biāo)簽中的src,一開始我們并沒有給它具體的圖片的資源路徑，而是自己定義了一個(gè)屬性 x-src，該屬性的值是圖片圖片的資源路徑，每一行的img都是如此，接下來，當(dāng)頁面載入的時(shí)候，我們使用jquery(當(dāng)然，你想 javascript原生的代碼也可以，我這里只是為了省時(shí)間而已)來循環(huán)遍歷每一個(gè)img，判斷每一個(gè)圖片是否在當(dāng)前可視區(qū)域內(nèi)，是則顯示圖片，否則稍 后處理，這里需要知道三個(gè)數(shù)據(jù)：

                 注：因?yàn)槲宜鶎懙氖钱?dāng)圖片的一半進(jìn)入的瀏覽器的可視區(qū)域內(nèi)才將這張圖片進(jìn)行加載，所以需要 第            三 個(gè)數(shù)據(jù)，這個(gè)看個(gè)人的需求是什么，如果你的需求是圖片只要已進(jìn)入可視區(qū)域內(nèi)就加載，可直接忽略            第三個(gè)數(shù)據(jù)!!!!

                                 1：瀏覽器可視區(qū)域的高度

                                 2：圖片相對于文檔的偏移量（這里只需要高度上的偏移量）

                                 3：圖片元素本身的高度

        如果圖片先對于文檔的偏移量+圖片元素本身的高度的一半    <  瀏覽器可視區(qū)域的高度，即表明圖片已經(jīng)有一半進(jìn)入的可視區(qū)域了，那么我就應(yīng)該要把這張圖片加載進(jìn)來了，可是img標(biāo)簽的src是為空的，x-src的值 才是圖片的資源路徑，這個(gè)時(shí)候就需要用jquery將img 標(biāo)簽的x-src值傳給src，從而將圖片加載進(jìn)來，具體實(shí)現(xiàn)代碼如下：

        具體的效果如下：

         你可以在控制臺看到，雖然我們有5行圖片,每行有3列，但加載進(jìn)來的圖片只有***列（圖片高度有超出一半的img才會加載圖片的資源進(jìn)來），其他的都沒有加載進(jìn)來，這就使得圖片的刷新會很快出現(xiàn)效果，那么接下來，用戶需要看到更多的圖片，這個(gè)時(shí)候需要進(jìn)行滾動(dòng)條往下滾動(dòng)，去刷新更多的圖片，那么這個(gè)時(shí)候我們除了上述的3個(gè)數(shù)據(jù)之外，還需要知道當(dāng)前滾動(dòng)條滾動(dòng)的距離，如果：

                圖片先對于文檔的偏移量+圖片元素本身的高度的一半    <  瀏覽器可視區(qū)域的高度  + 當(dāng)前滾動(dòng)條滾動(dòng)的距離，那么表明當(dāng)前圖片已經(jīng)在可視區(qū)域內(nèi)，并且圖片有一半以上的高度是在可視區(qū)域內(nèi)，那么將圖片進(jìn)行加載進(jìn)來，具體代碼如下：

        具體效果如下：

         在控制臺你可以看到，隨著滾動(dòng)條的滾動(dòng)，加載進(jìn)來的圖片由原來的三張變成了現(xiàn)在的六張，滾動(dòng)條不斷的往下滾動(dòng)，圖片就會不斷的加載進(jìn)來，從而得到更好的用戶體驗(yàn)。