iframe src 不加载页面_浏览器原生支持的图片和 iframe 懒加载 loading="lazy"...

为了提高页面用户体验，懒加载是一项历史悠久的技术，之前一般通过 Intersection Observer API (或者更古老的 getBoundingClientRect 方法)结合监听 scroll、resize 等事件来实现。

鉴于这个技术的通用性，也诞生了很多专门做懒加载的第三方开源库，比如 lazysizes、lozad、lazyload.js 等等，大部分项目直接安装使用即可。

其实从 Chrome 67+ 就已经原生支持懒加载特性了(包括基于 Chromium 的 Edge 和 Opera)，Firefox 也很快跟进支持，Safari 也在开发中了。这就是新的 loading HTML 属性，而且这个特性同时支持图片和 iframe 两类资源。

  基本用法  

<img src="image.png"      loading="lazy"      alt="…"      width="200"      height="200">

<iframe src="https://example.com"        loading=&