网站图片懒加载实现方法

\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、原生懒加载规则（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、首屏核心图：禁止加懒加载（会导致首屏加载延迟、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、优点"}}},"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":"零插件、不占用性能、不影响爬虫、百度/谷歌完全兼容、无需维护。"}}},"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":"二、进阶方案：JS懒加载（兼容老旧浏览器、可控性强）"}}},"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":"针对老旧网站、模板站、需要自定义加载距离、动画效果的场景，使用经典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、实现原理"}}},"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":"页面图片默认不加载真实地址，将真实图片地址存入 data-src，可视区域到达图片位置后，再赋值给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、优势"},"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":"可控性高、可提前预加载、兼容所有浏览器、适合大量图片列表页面。"}}},"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关键注意事项（核心避坑）"},"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":"很多网站开启懒加载后收录下降、LCP扣分、排名波动，全部是写法错误导致。"},"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、绝对禁止：首屏图片懒加载"},"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":"首屏大图一旦懒加载，会出现白屏、延迟渲染，直接导致LCP不达标、核心指标扣分。"},"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背景图片懒加载实现方式"},"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":"很多网站Banner、模块图使用CSS background图片，默认无法原生懒加载，需要通过类名触发加载。"},"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":"实现代码示例"}}}}},"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" 即可实现懒加载 -->
<img src="demo.webp" width="800" height="450" alt="图片优化" loading="lazy">

<!-- HTML结构 -->
<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();
            // 进入可视区域提前200px加载
            if(rect.top < window.innerHeight + 200){
                item.src = item.dataset.src;
                item.classList.remove('lazy');
            }
        })
    }
    // 初始执行 + 滚动执行
    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">