全站通用懒加载规范代码片段，img、iframe、video、js/css 一套直接放项目里全站复用

一、图片标准懒加载（非首屏统一用）

<img 
  src="xxx.jpg"
  alt="描述"
  width="800"
  height="450"
  loading="lazy"
  decoding="async">

规则：首屏 banner、logo、顶部大图 禁止加 loading="lazy"

二、Picture 多格式懒加载

<picture>
  <source srcset="xxx.avif" type="image/avif">
  <source srcset="xxx.webp" type="image/webp">
  <img 
    src="xxx.jpg"
    alt="描述"
    width="800"
    height="450"
    loading="lazy"
    decoding="async"
  ></picture>

三、Iframe 内嵌懒加载（地图/表单/第三方嵌入）

基础通用版

<iframe 
  src="https://xxx.com"
  loading="lazy"
  frameborder="0"
  scrolling="no"
  allowfullscreen></iframe>

自适应容器版

<div style="width:100%;height:420px;overflow:hidden;">
  <iframe 
    src="https://xxx.com"
    width="100%"
    height="100%"
    loading="lazy"
    frameborder="0"
    allowfullscreen
  ></iframe></div>

四、Video 视频懒加载（原生不支持 loading，两套方案）

极简无JS版（推荐日常用）

<video 
  controls
  preload="none"
  poster="video-cover.jpg"
  style="width:100%;height:auto;">
  <source src="video.mp4" type="video/mp4"></video>

preload="none"：只加载封面，滚动过来也不预加载，点击才加载视频。

专业 JS 视口懒加载（进入可视区自动加载）

<video class="lazy-video" controls preload="none" poster="cover.jpg" data-src="video.mp4" style="width:100%;height:auto;"></video><script>// 页面底部引入一次，全站生效document.addEventListener('DOMContentLoaded', function() {  const lazyVideos = document.querySelectorAll('.lazy-video');  const io = new IntersectionObserver((entries) => {
    entries.forEach(el => {      if (el.isIntersecting) {
        el.target.src = el.target.dataset.src;
        io.unobserve(el.target);
      }
    });
  });
  lazyVideos.forEach(v => io.observe(v));
});</script>

五、JS 脚本延迟加载（替代 lazy）

<!-- 延后执行、保持顺序 --><script src="xxx.js" defer></script><!-- 无序异步、谁先好谁执行 --><script src="xxx.js" async></script>

六、CSS 样式延迟懒加载

<link rel="stylesheet" href="xxx.css" media="print" onload="this.media='all'">

七、全站硬性规范口诀

1. 原生 loading="lazy" 只给 img、iframe 用，其他标签加了无效

2. 首屏关键图、首屏 iframe 坚决不加懒加载

3. img 必带原生 width height，防 CLS 布局抖动

4. 视频用 preload="none" 或交叉观察器懒加载

5. JS 用 defer/async，CSS 用 media trick 延迟