MonkeyEye（電影售票系統(tǒng)）項目地址：https://github.com/SYSUMonkeyEye/MonkeyEye-FE
為什么要實現(xiàn)圖片懶加載呢？
首先饲梭，來看一下應用的首頁（左一）：
? 其中下方是無限加載的列表枉疼，想象一下宣旱，假如列表中的所有圖片一次性加載火欧，將會是什么情況衷畦？展示圖片的地方將會一片空白，用戶體驗差摇锋，同時由于瀏覽器并發(fā)連接數(shù)量的限制，不是所有的圖片都能第一時間加載站超。
? 由于用戶打開網(wǎng)頁的時候荸恕，只會關心可視界面內(nèi)的圖片，因此其他圖片可暫時用同一張圖片代替死相，等頁面滾動的過程中融求，圖片進入至可視界面時，再向服務器發(fā)出資源請求算撮。這樣既可以快速加載圖片生宛，帶來良好的用戶提樣县昂，同時由于不可見的圖片不會第一時間加載，能夠節(jié)省許多流量陷舅。
? 這里就不展示代碼倒彰，具體談談實現(xiàn)的步驟：
在
<img>標簽中插入指令，當監(jiān)測到指令插入標簽時莱睁，我們判斷這張圖片是否需要懶加載待讳。有兩種情況，一是圖片還沒有到達可視區(qū)域仰剿，二是圖片已經(jīng)加載创淡。當頁面加載時，監(jiān)聽圖片列表的scroll事件南吮，判斷哪些圖片可以進行懶加載琳彩。這里要注意的是，相同的圖片加載一次后部凑，再次出現(xiàn)時可以直接從瀏覽器緩存中取出露乏，不用再向服務器發(fā)送請求。
當頁面即將銷毀時砚尽，要釋放頁面引用的資源施无，將當前頁面的所有事件監(jiān)聽器銷毀。
