圖片延遲加載的原理是什么摄乒？
圖片延遲加載的原理就是先不設(shè)置img的src屬性蛹磺，等合適的時(shí)機(jī)（比如滾動(dòng)卸亮、滑動(dòng)等）再把圖片真實(shí)url放到img的src屬性上叫榕。
過多的圖片會(huì)嚴(yán)重影響網(wǎng)頁(yè)的加載速度党瓮，移動(dòng)網(wǎng)絡(luò)下的流量消耗巨大详炬，延遲加載幾乎是標(biāo)配。
圖片延遲加載的使用場(chǎng)景有哪些寞奸？
- 好奇心日?qǐng)?bào)首頁(yè)和列表頁(yè)都有很多固定寬高的圖片呛谜。
- 好奇心日?qǐng)?bào)文章詳情頁(yè)的圖片，這些圖片需要自適應(yīng)寬度且保持寬高比（防止頁(yè)面抖動(dòng)）枪萄。
固定寬高延遲加載
這個(gè)比較簡(jiǎn)單隐岛，設(shè)置好固定寬高，直接使用最簡(jiǎn)單的延遲加載即可
淘寶mobile首頁(yè)的延遲加載有個(gè)點(diǎn)做得特別好瓷翻，滾動(dòng)結(jié)束后只加載當(dāng)前視窗可見的圖片聚凹，不會(huì)加載滾動(dòng)超過視窗的圖片割坠，也不會(huì)加載還沒滾動(dòng)到的視窗圖片。
非固定寬高的延遲加載
目前大概有兩種方案妒牙，各有優(yōu)劣彼哼，具體看情況使用：
第一種方案使用padding-top或者padding-bottom來實(shí)現(xiàn)固定寬高比。優(yōu)點(diǎn)是純css方案湘今，缺點(diǎn)是html冗余敢朱，對(duì)輸出到第三方不友好
<div style="padding-top:75%">
<img data-src="" alt="" class="lazyload">
<div>
第二種方案在頁(yè)面初始化階段利用ratio設(shè)置實(shí)際寬高值，優(yōu)點(diǎn)是html干凈摩瞎，對(duì)輸出到第三方友好蔫饰，缺點(diǎn)是依賴js，理論上會(huì)至少抖動(dòng)一次
<img data-src="" alt="" class="lazyload" data-ratio="0.75">
更進(jìn)一步結(jié)合srcset
除了上面說的延遲加載愉豺，我們可以更進(jìn)一步的引入srcset篓吁，通過設(shè)置srcset來保證加載最匹配的圖片，這樣對(duì)于一倍屏蚪拦，二倍屏杖剪，三倍屏來說，可以做到不浪費(fèi)流量且效果最好驰贷。
都有哪些延遲加載開源方案盛嘿？
jquery_lazyload
依賴于jquery
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
// 初始化
$("img.lazy").lazyload();
lazysizes 推薦
原生js，不依賴于jquery/zepto
自動(dòng)監(jiān)測(cè)可能發(fā)生變化的lazyload節(jié)點(diǎn)括袒，不需要額外初始化
支持響應(yīng)式圖片srcset
性能高次兆，改善SEO
// 引入js文件
<script src="lazysizes.min.js" async=""></script>
// 非響應(yīng)式 例子
<img data-src="image.jpg" class="lazyload" />
// 響應(yīng)式 例子，自動(dòng)計(jì)算合適的圖片
<img
data-sizes="auto"
data-src="image2.jpg"
data-srcset="image1.jpg 300w,
image2.jpg 600w,
image3.jpg 900w" class="lazyload" />
// iframe 例子
<iframe frameborder="0"
class="lazyload"
allowfullscreen=""
data-src="http://www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>
lazyload
依賴jquery/zepto
<!-- 直接賦予圖片寬高 -->
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
<!-- 或：通過css賦予圖片寬高 -->
<style>
.lazy{width:640px;height:480px;}
</style>
<img class="lazy" data-original="img/example.jpg">
<!-- 或：自適應(yīng)寬度的圖片樣式（常用于移動(dòng)端） -->
<style>
.lazy{width:100%;height:0;padding-top:75%;background-size:100%;}
/* 假設(shè)高寬比為 480:640锹锰，即75%芥炭，并使用背景圖的方式將圖片鋪在padding-top區(qū)域內(nèi)
（padding的百分比是寬度的百分比而不是高度的，即使是padding-top|padding-bottom） */
</style>
<div class="lazy" data-original="img/example.jpg"><div>
<!-- 請(qǐng)參閱examples/enabled_image_full_width.html -->
<!-- 初始化 -->
$(".lazy").lazyload();
微信如何實(shí)現(xiàn)延遲加載恃慧？
研究了微信延遲加載的代碼园蝠，還解決了一個(gè)問題，那就是常見于移動(dòng)端的自適應(yīng)寬度的延遲加載痢士，即根據(jù)情況具體計(jì)算寬高彪薛。
// 源碼
<img
data-s="300,640"
data-type="jpeg"
data-src="http://mmbiz.qpic.cn/mmbiz/meG6Vo0MeviaLibiaARRszfMpiaXtejcktPB2fK6uP13R4RS9Y7fHtk5bUd7A9R9zRyZ1nupW8ZVjHwBiaZUa3SkcPg/0?wx_fmt=jpeg"
data-ratio="0.8003597122302158"
data-w=""
/>
// 解析后的代碼
<img
data-s="300,640"
data-type="jpeg"
data-src="http://mmbiz.qpic.cn/mmbiz/meG6Vo0MeviaLibiaARRszfMpiaXtejcktPBLbT37dSYzNyhwDTiac0WiaribF0Vt7I3Zd7AG9xXSCUoch61KicnYnfqIw/0?wx_fmt=jpeg"
data-ratio="0.8003597122302158"
data-w=""
src="http://mmbiz.qpic.cn/mmbiz/meG6Vo0MeviaLibiaARRszfMpiaXtejcktPBLbT37dSYzNyhwDTiac0WiaribF0Vt7I3Zd7AG9xXSCUoch61KicnYnfqIw/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&retryload=1"
style="width: 414px !important; visibility: visible !important; height: 331.349px !important;"
/>
/* 其中
data-s：表示可選的圖片尺寸大小
data-type：表示圖片類型
data-src：表示圖片鏈接
data-ratio：表示長(zhǎng)寬比
*/
由于源碼是壓縮模式的，做簡(jiǎn)單的猜測(cè)如下：
- 對(duì)于延遲加載怠蹂，微信采用的模式和正常的延遲加載的模式類似善延，即用data-src存儲(chǔ)真實(shí)的圖片鏈接
- 為了解決移動(dòng)端的自適應(yīng)寬度的問題，微信存儲(chǔ)了長(zhǎng)寬比城侧，然后進(jìn)入頁(yè)面就計(jì)算在不同設(shè)備里的真實(shí)寬高易遣，并設(shè)置在style
其他問題？
- 接入第三方平臺(tái)的網(wǎng)頁(yè)怎么處理赞庶？
由于好奇心日?qǐng)?bào)的文章會(huì)輸出到第三方平臺(tái)训挡，比如今日頭條/一點(diǎn)資訊等平臺(tái)澳骤，這些平臺(tái)對(duì)html都有一定的規(guī)范。這時(shí)候就需要后臺(tái)在輸出之前對(duì)html做一些轉(zhuǎn)換澜薄。
為了簡(jiǎn)單起見为肮，類似<div class="lazy" data-original="img/example.jpg"><div>的方案不太適合讓后臺(tái)轉(zhuǎn)換，所以微信這種動(dòng)態(tài)計(jì)算方法可以借鑒肤京。 - 怎么處理響應(yīng)式圖片颊艳？
響應(yīng)式圖片能夠根據(jù)當(dāng)前屏幕分辨率加載最匹配的圖片，能夠因地制宜忘分，詳見圖片響應(yīng)式解決方案 - 方案有了棋枕，回頭追加一篇具體實(shí)踐踩坑的博文
