小編給大家分享一下html中如何實(shí)現(xiàn)懶加載，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

興慶ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

優(yōu)勢

1. 性能收益：瀏覽器加載圖片、decode、渲染都需要耗費(fèi)資源，懶加載能節(jié)約性能消耗，縮短onload事件時(shí)間。

2. 節(jié)約帶寬：這個(gè)不需要解釋。

通常，我們?cè)趆tml中展示圖片，會(huì)有兩種方式：

1. img 標(biāo)簽

2. css background-image

img的懶加載實(shí)現(xiàn)

img有兩種方式實(shí)現(xiàn)懶加載：

1. 事件監(jiān)聽(scroll、resize、orientationChange)

    
    
    
    
    


    
    
    
    
     -->
    
    
    
    
    
    
    
    

1. Intersection Observer（兼容性問題）

    
    
    
    
    


    
     -->
    
    
    
    
    
    
    
    
    
    
    

background-image的實(shí)現(xiàn)

background-image的實(shí)現(xiàn)跟img的原理基本是一樣的，區(qū)別是在對(duì)class的處理上：

漸進(jìn)式懶加載

漸進(jìn)式懶加載，指的是存在降級(jí)處理，通常html形式如下：

這樣的代碼會(huì)有2個(gè)好處：

1. 如果js執(zhí)行失敗，可以點(diǎn)擊預(yù)覽

2. 大小與實(shí)際圖一致的占位data URI，避免reflow

最終的代碼如下：

以上是html中如何實(shí)現(xiàn)懶加載的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！