整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
文鏈接：http://www.gbtags.com/gb/share/6366.htm?
原本是打算昨天昨天下午的時候就寫一篇關(guān)于前端圖片延遲加載的詳細技術(shù)的博客的，沒想到下午公司項目出現(xiàn)了一些問題，所以一直在改代碼進行調(diào)試，今天白天一整天又在外面跑，回來已經(jīng)傍晚了，剛吃完飯，就想著趕緊補上，這樣很多不懂這方面具體實現(xiàn)的小伙伴們也能早點學(xué)習(xí)經(jīng)驗。
前端頁面的用戶體驗對于一個網(wǎng)站來說是至關(guān)重要的，我們在訪問一些圖片量比較大的網(wǎng)站的時候，往往會有這樣的感受：顯示在我電腦屏幕可視區(qū)域的圖片總是不能及時的刷出來，這就造成了對于一些沒有什么耐心的用戶而言，他們就不愿意多等下去，索性直接關(guān)閉了網(wǎng)站去看其他的網(wǎng)站，這就使得本網(wǎng)站的用戶量的流失，這往往是一個網(wǎng)站最不愿意看到的情況，那么對于這樣的情況而言，開發(fā)者們不斷的努力，很快就想到了解決的方案，讓在可視區(qū)域的圖片立即加載進來，而讓不在可視區(qū)域并且需要通過滾動條進行滾動顯示的圖片在圖片滾動到可視區(qū)域內(nèi)再顯示出來，這就比一次性把所有的圖片資源加載進來從而造成圖片刷新較慢的用戶體驗好的多的多。
那么，圖片延遲加載的技術(shù)具體如何實現(xiàn)呢？下面來做詳細的介紹:
首先，定義圖片為三列，一共有5行，具體代碼如下：
里面用到的bootstrap的布局技術(shù)（當(dāng)然，這不是重點），請看img標(biāo)簽中的src,一開始我們并沒有給它具體的圖片的資源路徑，而是自己定義了一個屬性 x-src，該屬性的值是圖片圖片的資源路徑，每一行的img都是如此，接下來，當(dāng)頁面載入的時候，我們使用jquery(當(dāng)然，你想javascript原生的代碼也可以，我這里只是為了省時間而已)來循環(huán)遍歷每一個img，判斷每一個圖片是否在當(dāng)前可視區(qū)域內(nèi)，是則顯示圖片，否則稍后處理，這里需要知道三個數(shù)據(jù)：
注：因為我所寫的是當(dāng)圖片的一半進入的瀏覽器的可視區(qū)域內(nèi)才將這張圖片進行加載，所以需要第三個數(shù)據(jù)，這個看個人的需求是什么， 如果你的需求是圖片只要已進入可視區(qū)域內(nèi)就加載，可直接忽略第三個數(shù)據(jù)!!!!
1：瀏覽器可視區(qū)域的高度
2：圖片相對于文檔的偏移量（這里只需要高度上的偏移量）
3：圖片元素本身的高度
如果圖片先對于文檔的偏移量+圖片元素本身的高度的一半 < 瀏覽器可視區(qū)域的高度，即表明圖片已經(jīng)有一半進入的可視區(qū)域了，那么我就應(yīng)該要把這張圖片加載進來了，可是img標(biāo)簽的src是為空的，x-src的值才是圖片的資源路徑，這個時候就需要用jquery將img 標(biāo)簽的x-src值傳給src，從而將圖片加載進來，具體實現(xiàn)代碼如下：
具體的效果如下：
你可以在控制臺看到，雖然我們有5行圖片,每行有3列，但加載進來的圖片只有第一列（圖片高度有超出一半的img才會加載圖片的資源進來），其他的都沒有加載進來，這就使得圖片的刷新會很快出現(xiàn)效果，那么接下來，用戶需要看到更多的圖片，這個時候需要進行滾動條往下滾動，去刷新更多的圖片，那么這個時候我們除了上述的3個數(shù)據(jù)之外，還需要知道當(dāng)前滾動條滾動的距離，如果：
圖片先對于文檔的偏移量+圖片元素本身的高度的一半 < 瀏覽器可視區(qū)域的高度 + 當(dāng)前滾動條滾動的距離，那么表明當(dāng)前圖片已經(jīng)在可視區(qū)域內(nèi)，并且圖片有一半以上的高度是在可視區(qū)域內(nèi)，那么將圖片進行加載進來，具體代碼如下：
具體效果如下：
在控制臺你可以看到，隨著滾動條的滾動，加載進來的圖片由原來的三張變成了現(xiàn)在的六張，滾動條不斷的往下滾動，圖片就會不斷的加載進來，從而得到更好的用戶體驗。
這就是圖片延遲加載的具體實現(xiàn)，是不是覺得圖片的炫酷，如果你想自己看下具體的實現(xiàn)效果，可以點擊我的網(wǎng)址進行查看：
http://meichao.sinaapp.com/show.html
原文鏈接：http://www.gbtags.com/gb/share/6366.htm?
們經(jīng)常會遇到這樣的一個問題。
設(shè)計出了很牛逼的設(shè)計稿，客戶確認了，前端靜態(tài)制作也出來，還原設(shè)計稿95%以上，客戶也確認了。
那是個完美啊！！做完程序了，交給客戶了。然后客戶自己上傳了圖片了。那個悲催啊！！慘不忍睹啊！！
完全和設(shè)計稿兩碼事？圖片不好看，到處都跑位。
客戶就罵過來了，你們是否也遇到這樣的事情？因為客戶的公司沒有設(shè)計師啊，哈哈，這個問題可能遇到的不少。
其實大家都會說，這歸根到底都是客戶沒有處理圖片的問題所造成的。然后大家都推來推去。
那么，前端制作工程師是否有辦法解決這樣的問題，其實是可以的。如果因圖片問題導(dǎo)致布局變了，解決了這個問題就只剩下圖片的美觀性，那這個就可以跟客戶說你要請個設(shè)計師幫你處理圖片啊。這樣不就解決問題了嗎？
這種方式和微信朋友圈的九宮格圖片展示方式類似，只顯示圖片中間的內(nèi)容，其他的將會被隱藏。
舉個栗子：
這個列表是不是很整齊，看起來比較舒服，雖然圖片有那么點點的變形，但不影響閱讀。
如果其中有一張圖片的尺寸稍微有一點點不一樣，肯定會出現(xiàn)跑位的情況。就像下面這樣。這樣客戶看到不被投訴才怪哦！！
那么就以這個來說說解決方式。
大家都知道圖片有一種特性，就是當(dāng)圖片的寬度改變時，高度也會隨著等比例在改變。
例如：一張寬高都為100px的圖片，如果把寬度調(diào)至200px，那么高度是不是也會隨之變成200px；沒錯的，就是利用這個特性來解決布局亂的情況。
這里就拿上一次說到的 “圖文列表 純css布局” 那次說的布局來說說，因為都是做好，和上面那個圖類似。偷偷懶。如果沒看過那篇，搜一下 “圖文列表 純css布局”，就可以找到了。（如需下載源碼，請關(guān)注微信公眾號：JS學(xué)吧）
效果是這樣的：
如何切出占位圖呢？如下操作
用PS打開文件，用裁剪工具把圖片完整的裁下來，如下圖
裁完成，再點擊菜單欄目 “圖像 > 圖像大小” 或 按著 Alt鍵，再點兩次 I 鍵。可以調(diào)出 “圖像大小” 彈窗。
可以看到 “像素大小” 的寬度和高度都為260px，那么只要調(diào)其中一個就可以，就可以達到等比例調(diào)整。
我們先調(diào)成10px，確定后，再把圖層的 “小眼睛” 關(guān)掉，另存為一個 png24 的透明圖片，記得哦！！一定是要png24的。名字自己定啦！！
然后把 img 中的圖片路徑改為如下：
<a href=""><img src="rect.png" alt="" width="100%"></a>然后刷新看看效果，是不是發(fā)現(xiàn)原來的圖片不見的，變成空白的，但是原來的布局結(jié)構(gòu)沒有改變。其實要的就是這樣的效果。
然后我們在 img 的外層再包個div，就拿這個div來放圖片。順便加個背景色看看效果。
<a href="">
<div style="background: #000;">
<img src="rect.png" alt="" width="100%">
</div>
</a>
看，占位圖片的效果出來了。外層div的寬度和高度都被img撐開了。是不是達到了想要的效果。
關(guān)鍵的時候來了。就是處理圖片。我們要把產(chǎn)品圖片做為背景的形式輸出即可以。把圖片的路徑寫在div上面的就解決了。再加上css3新屬性就可以了。
HTML如下：
<a href="">
<div class="cover-img" style="background-image: url(pic001.jpg);">
<img src="rect.png" alt="" width="100%">
</div>
</a>
用背景樣式 background-image 定入路徑。再添加一個 cover-img 的類名。然后 cover-img 的樣式如下：
.cover-img {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
注意、注意、注意，中要的事說三遍。重點就在于 css3 的新屬性 background-size: cove；
這個屬性就是會把背景圖片，以等比例的形式保持圖像本身的寬高比例，將圖片縮放到正好完全覆蓋定義背景的區(qū)域。
是不是不明白，那就對了，挺不好理解。最好還是用實際效果來看看。
最終出來的效果就是和最開始的那張圖片一樣的，只是看不出來而已。
那么我們就來玩真的。直接上網(wǎng)整一張大圖的路徑放進去看看就知道了。
上某某網(wǎng)站找特大尺寸的圖片來，例如下面這張：尺寸是2533x1583，夠大了，也不是正方形哦！！我們一開始說的都是正方形，現(xiàn)在弄個不是正方形的圖片來試試效果。
HTML如下：
<a href="">
<div class="cover-img" style="background-image: url(pic002.jpg);">
<img src="rect.png" alt="" width="100%">
</div>
</a>
更改url里的路徑即可
出來的效果如下：
是不是自動調(diào)整了。
我們再換一張高形狀的圖片。二哈圖：尺寸是2448x3264
HTML：如下
<a href="">
<div class="cover-img" style="background-image: url(pic003.jpg);">
<img src="rect.png" alt="" width="100%">
</div>
</a>
最終效果：
怎么樣，效果還可以吧！！不知道你們看出了什么了沒有。
第一張是寬形狀的圖片，是以高度填滿 div 的區(qū)域。
第二張是高形狀的圖片，是以寬度填滿 div 的區(qū)域。
全都是靠著 background-size: cover; 這個屬性解決了。但也是有不好的地方。
例如不支持IE瀏覽器，圖片顯示不全，多一個文件服務(wù)器要多請求一次.....等等問題！！做圖時的內(nèi)容盡可能在正中間。
然后，不管客戶上傳什么鬼形狀的圖片，都不會產(chǎn)生布局變亂的情況。
獲取《vue3.0大公司后臺管理系統(tǒng)開發(fā) 正規(guī)開發(fā)流程項目實踐》視頻，
請點擊下面 “了解更多” 或 請關(guān)注微信公眾號《手把手擼碼前端》
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
