\n"}}},"align":"","type":"code","revisions":[],"locked":false,"author":"7592586811961052102","language":"html"}},"Q3f0f1ypxdqrLQcxGtic2acynse":{"id":"Q3f0f1ypxdqrLQcxGtic2acynse","snapshot":{"comments":[],"hidden":false,"author":"7592586811961052102","children":[],"align":"left","type":"heading3","parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","revisions":[],"locked":false,"ai_extra":{"rewrite_command":1},"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+g"},"text":{"0":"2、原生懶加載規(guī)則（SEO必看）"}}}}},"ZwRpfePgQdMV3xcq02Hc923Lnrd":{"id":"ZwRpfePgQdMV3xcq02Hc923Lnrd","snapshot":{"type":"bullet","comments":[],"align":"left","ai_extra":{"rewrite_command":1},"children":[],"text":{"apool":{"nextNum":4,"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"],"3":["inlineCode","true"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1*2+5*0*1+6*0*1*3+e"},"text":{"0":"非首屏圖片：全部加上 loading=\"lazy\""}}},"parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102"}},"XcGIfAGhudEFQscM1sNcCoDznjg":{"id":"XcGIfAGhudEFQscM1sNcCoDznjg","snapshot":{"parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","locked":false,"hidden":false,"author":"7592586811961052102","ai_extra":{"rewrite_command":1},"children":[],"align":"left","type":"bullet","revisions":[],"text":{"apool":{"nextNum":3,"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1*2+e*0*1+1*0*1*2+6*0*1+h"},"text":{"0":"首屏Banner、首屏核心圖：禁止加懶加載（會(huì)導(dǎo)致首屏加載延遲、LCP扣分）"}}},"comments":[]}},"GsxUfW9a5detWGcHk9OcHRvKnrg":{"id":"GsxUfW9a5detWGcHk9OcHRvKnrg","snapshot":{"align":"left","type":"heading3","revisions":[],"hidden":false,"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+4"},"text":{"0":"3、優(yōu)點(diǎn)"}}},"ai_extra":{"rewrite_command":1},"children":[],"parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","comments":[],"locked":false,"author":"7592586811961052102"}},"ISWYfd3QpdRnLWcy7ygckgfynF3":{"id":"ISWYfd3QpdRnLWcy7ygckgfynF3","snapshot":{"type":"text","locked":false,"children":[],"ai_extra":{"rewrite_command":1},"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+v"},"text":{"0":"零插件、不占用性能、不影響爬蟲、百度/谷歌完全兼容、無需維護(hù)。"}}},"align":"left","parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","comments":[],"revisions":[],"hidden":false,"author":"7592586811961052102"}},"JkZsfXc7KdL862c0ELecPpzLnfb":{"id":"JkZsfXc7KdL862c0ELecPpzLnfb","snapshot":{"locked":false,"hidden":false,"author":"7592586811961052102","ai_extra":{"rewrite_command":1},"type":"divider","parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","comments":[],"revisions":[]}},"HspifNwATdNM52ckTbqcDRS6n3E":{"id":"HspifNwATdNM52ckTbqcDRS6n3E","snapshot":{"parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","locked":false,"ai_extra":{"rewrite_command":1},"children":[],"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+q"},"text":{"0":"二、進(jìn)階方案：JS懶加載（兼容老舊瀏覽器、可控性強(qiáng)）"}}},"align":"left","type":"heading2","comments":[],"revisions":[],"hidden":false,"author":"7592586811961052102"}},"AcUifbFVadBGoocUsj7c3JRwnIK":{"id":"AcUifbFVadBGoocUsj7c3JRwnIK","snapshot":{"align":"left","type":"text","parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","revisions":[],"children":[],"ai_extra":{"rewrite_command":1},"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2},"initialAttributedTexts":{"attribs":{"0":"*0*1+1i"},"text":{"0":"針對(duì)老舊網(wǎng)站、模板站、需要自定義加載距離、動(dòng)畫效果的場景，使用經(jīng)典JS懶加載方案，也是主流建站程序常用方案。"}}},"comments":[],"locked":false,"hidden":false,"author":"7592586811961052102"}},"ROpXfyijKd4S90cbsRccQK94niO":{"id":"ROpXfyijKd4S90cbsRccQK94niO","snapshot":{"locked":false,"ai_extra":{"rewrite_command":1},"children":[],"align":"left","parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","revisions":[],"hidden":false,"author":"7592586811961052102","text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2},"initialAttributedTexts":{"attribs":{"0":"*0*1+6"},"text":{"0":"1、實(shí)現(xiàn)原理"}}},"type":"heading3","comments":[]}},"FSzsf9fyHdcA8GcdroDcQUlFnHg":{"id":"FSzsf9fyHdcA8GcdroDcQUlFnHg","snapshot":{"locked":false,"hidden":false,"author":"7592586811961052102","ai_extra":{"rewrite_command":1},"type":"text","parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","comments":[],"revisions":[],"children":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["inlineCode","true"]},"nextNum":3},"initialAttributedTexts":{"attribs":{"0":"*0*1+o*0*1*2+8*0*1+p"},"text":{"0":"頁面圖片默認(rèn)不加載真實(shí)地址，將真實(shí)圖片地址存入 data-src，可視區(qū)域到達(dá)圖片位置后，再賦值給src加載圖片。"}}},"align":"left"}},"OqmDfF7U4dvOa3csceWcQPG5nue":{"id":"OqmDfF7U4dvOa3csceWcQPG5nue","snapshot":{"type":"heading3","ai_extra":{"rewrite_command":1},"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+b"},"text":{"0":"2、完整可直接使用代碼"}}},"hidden":false,"author":"7592586811961052102","children":[],"align":"left","parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","comments":[],"revisions":[],"locked":false}},"V3vOfrTY9dOF2bcvxuOcKQzknlc":{"id":"V3vOfrTY9dOF2bcvxuOcKQzknlc","snapshot":{"ai_extra":{"rewrite_command":1},"children":[],"type":"code","parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","revisions":[],"hidden":false,"author":"7592586811961052102","comments":[],"locked":false,"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1|l+il*0*1+1"},"text":{"0":"\n\n\n\n "}}},"align":"","language":"html"}},"YRB6f5HQ1dLaPiclHIZcsm6Jnig":{"id":"YRB6f5HQ1dLaPiclHIZcsm6Jnig","snapshot":{"author":"7592586811961052102","align":"left","revisions":[],"parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","comments":[],"locked":false,"hidden":false,"ai_extra":{"rewrite_command":1},"children":[],"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]}},"initialAttributedTexts":{"text":{"0":"3、優(yōu)勢"},"attribs":{"0":"*0*1+4"}}},"type":"heading3"}},"XYA4fqAVAd0ZfycAjZRcoBUknRg":{"id":"XYA4fqAVAd0ZfycAjZRcoBUknRg","snapshot":{"type":"text","comments":[],"locked":false,"hidden":false,"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+v"},"text":{"0":"可控性高、可提前預(yù)加載、兼容所有瀏覽器、適合大量圖片列表頁面。"}}},"parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","revisions":[],"author":"7592586811961052102","ai_extra":{"rewrite_command":1},"children":[],"align":"left"}},"SDugfqSVFduoIMcur9Bc5tzhnsf":{"id":"SDugfqSVFduoIMcur9Bc5tzhnsf","snapshot":{"ai_extra":{"rewrite_command":1},"author":"7592586811961052102","comments":[],"hidden":false,"locked":false,"parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","revisions":[],"type":"divider"}},"SSZMfUfJydtK7zcrH9XcYvpzn9g":{"id":"SSZMfUfJydtK7zcrH9XcYvpzn9g","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"四、懶加載SEO關(guān)鍵注意事項(xiàng)（核心避坑）"},"attribs":{"0":"*0*1+k"},"rows":{},"cols":{}}},"type":"heading2"}},"DX1cfzxPTdk0GXcwuGjc5AZBn6f":{"id":"DX1cfzxPTdk0GXcwuGjc5AZBn6f","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]},"nextNum":3,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1,"bold,true":2}},"initialAttributedTexts":{"text":{"0":"很多網(wǎng)站開啟懶加載后收錄下降、LCP扣分、排名波動(dòng)，全部是寫法錯(cuò)誤導(dǎo)致。"},"attribs":{"0":"*0*1+a*0*1*2+f*0*1+b"},"rows":{},"cols":{}}},"type":"text"}},"GL6KfYSKWdTjYGcvl95cTzRdnhc":{"id":"GL6KfYSKWdTjYGcvl95cTzRdnhc","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"1、絕對(duì)禁止：首屏圖片懶加載"},"attribs":{"0":"*0*1+e"},"rows":{},"cols":{}}},"type":"heading3"}},"PplJfee4kdDihachUAeckI61nHh":{"id":"PplJfee4kdDihachUAeckI61nHh","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]},"nextNum":3,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1,"bold,true":2}},"initialAttributedTexts":{"text":{"0":"首屏大圖一旦懶加載，會(huì)出現(xiàn)白屏、延遲渲染，直接導(dǎo)致LCP不達(dá)標(biāo)、核心指標(biāo)扣分。"},"attribs":{"0":"*0*1+p*0*1*2+d*0*1+1"},"rows":{},"cols":{}}},"type":"text"}},"KU6cfYfcIdWglccOE3OceuLjnyA":{"id":"KU6cfYfcIdWglccOE3OceuLjnyA","snapshot":{"author":"7592586811961052102","ai_extra":{"rewrite_command":1},"type":"divider","parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","comments":[],"revisions":[],"locked":false,"hidden":false}},"IPq8fb8WwdUChZcotbScCBYsnAc":{"id":"IPq8fb8WwdUChZcotbScCBYsnAc","snapshot":{"ai_extra":{"rewrite_command":1},"children":[],"type":"heading2","parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","comments":[],"revisions":[],"locked":false,"author":"7592586811961052102","align":"left","hidden":false,"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2},"initialAttributedTexts":{"text":{"0":"三、CSS背景圖片懶加載實(shí)現(xiàn)方式"},"attribs":{"0":"*0*1+g"}}}}},"SXtrfgM6qdBlllcYFOFc9n8snUh":{"id":"SXtrfgM6qdBlllcYFOFc9n8snUh","snapshot":{"parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","comments":[],"revisions":[],"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]}},"initialAttributedTexts":{"text":{"0":"很多網(wǎng)站Banner、模塊圖使用CSS background圖片，默認(rèn)無法原生懶加載，需要通過類名觸發(fā)加載。"},"attribs":{"0":"*0*1+1i"}}},"type":"text","locked":false,"hidden":false,"ai_extra":{"rewrite_command":1},"align":"left"}},"LuzUfcclldUJ0Bca0Amct2renFh":{"id":"LuzUfcclldUJ0Bca0Amct2renFh","snapshot":{"align":"left","type":"heading3","comments":[],"revisions":[],"locked":false,"author":"7592586811961052102","parent_id":"GTdPduPAWouoypxqHyZc1fr2nuf","hidden":false,"ai_extra":{"rewrite_command":1},"children":[],"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+6"},"text":{"0":"實(shí)現(xiàn)代碼示例"}}}}},"U66efa1EpdcrQ4cnXN7cph00nbO":{"id":"U66efa1EpdcrQ4cnXN7cph00nbO","snapshot":{"locked":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]}},"initialAttributedTexts":{"text":{"0":"\n

<!-- 給圖片添加 loading="lazy" 即可實(shí)現(xiàn)懶加載 -->
<img src="demo.webp" width="800" height="450" alt="圖片優(yōu)化" loading="lazy">

<!-- HTML結(jié)構(gòu) -->
<img class="lazy" data-src="demo.webp" width="800" height="450" alt="懶加載圖片" src="">

<!-- JS懶加載代碼 -->
<script>
document.addEventListener('DOMContentLoaded',function(){
    let lazyImages = document.querySelectorAll('.lazy');
    let lazyLoad = function(){
        lazyImages.forEach(function(item){
            let rect = item.getBoundingClientRect();
            // 進(jìn)入可視區(qū)域提前200px加載
            if(rect.top < window.innerHeight + 200){
                item.src = item.dataset.src;
                item.classList.remove('lazy');
            }
        })
    }
    // 初始執(zhí)行 + 滾動(dòng)執(zhí)行
    lazyLoad();
    window.addEventListener('scroll',lazyLoad);
})
</script>

<!-- HTML -->
<div class="bg-lazy" data-bg="banner.webp"></div>

<script>
document.addEventListener('DOMContentLoaded',function(){
    let bgLazy = document.querySelectorAll('.bg-lazy');
    function bgLoad(){
        bgLazy.forEach(function(el){
            let top = el.getBoundingClientRect().top;
            if(top < window.innerHeight + 200){
                el.style.backgroundImage = 'url('+el.dataset.bg+')';
            }
        })
    }
    bgLoad();
    window.addEventListener('scroll',bgLoad);
})
</script>

<style>
.bg-lazy{
  width:100%;
  height:400px;
  background:#f5f5f5 no-repeat center;
  background-size:cover;
}
</style>

<!-- 正確 -->
<img data-src="demo.webp" width="800" height="450" alt="說明" loading="lazy">