🔥lazy loading 下篇：更现代的加载方法🔥

MrSkye
95 阅读3分钟

更现代的实现懒加载的方法

属性 loading = 'lazy'

loading='lazy' 是一个 HTML 属性，用于控制图片或 iframe 的加载方式。它可以让浏览器在滚动到可见区域时才加载这些资源，而不是在页面加载时立即加载。这可以显著提高页面的初始加载速度和性能，特别是在包含大量图片或 iframe 的页面中。

iframe

<iframe>（Inline Frame）是 HTML 中的一个元素，用于在当前页面中嵌入另一个 HTML 文档。这个嵌入的文档可以来自同一个域名，也可以来自不同的域名。<iframe> 元素创建了一个独立的浏览器上下文，这意味着嵌入的内容与主页面是隔离的，它们可以有不同的样式、脚本和 cookie。

常见用途

  1. 嵌入外部网站：可以在自己的网页中嵌入其他网站的内容，常用于展示第三方服务或工具。
  2. 广告：许多在线广告系统使用 iframes 来嵌入广告代码。
  3. 嵌入视频：YouTube、Vimeo 等视频平台提供的嵌入代码通常使用 iframes。
  4. 嵌入地图：Google Maps、OpenStreetMap 等地图服务也提供 iframes 用于嵌入地图。
  5. 隔离内容：通过 iframes 可以将某些内容与主页面隔离，避免脚本冲突或其他安全问题。
<iframe src="https://www.example.com" width="600" height="400" title="Example Website"></iframe>

我们可以直接在标签内添加loading='lazy'来实现懒加载

<img src="image.jpg" alt="描述" loading="lazy">

属性值

  • eager：默认值，表示资源会立即加载。
  • lazy：表示资源会在进入视口（即用户滚动到该位置）时才加载。
  • auto：由浏览器决定何时加载资源（通常等同于 eager）。

优点

  1. 提高页面加载速度：减少了初始加载时的请求数量，使页面更快地呈现给用户。
  2. 减少带宽使用：如果用户没有滚动到某些内容，那么这些内容的资源就不会被加载，从而节省了带宽。
  3. 更好的用户体验：页面加载更快，用户可以更快地看到主要内容。

兼容性

loading='lazy' 在现代浏览器中的支持情况非常好，以下是主要浏览器的支持情况：

  • Chrome：76+ 版本
  • Firefox：75+ 版本
  • Safari：13.1+ 版本
  • Edge：80+ 版本
  • Opera：63+ 版本

对于不支持 loading='lazy' 的旧版浏览器，图片和 iframe 会回退到默认的立即加载行为。

IntersectionObserver（浏览器API）

function  addObserver(){
            const elses = document.querySelectorAll('img[data-original][lazyload]');
            const observer = new IntersectionObserver(function(changes){
                changes.forEach(function(element){
                    if(element.intersectionRatio > 0 && element.intersectionRatio <=1){
                        const img = new Image();
                        img.src = element.target.dataset.original;
                        img.onload = function(){
                            element.target.src = img.src;
                        }
                    }
                })
                
            });
            elses.forEach((item)=>{
            // 把每一个元素都加入观察对象
                observer.observe(item);
            })
        }
        addObserver();
  • 这里定义了一个 IntersectionObserver 的实例，并传入一个回调函数。这个回调函数会在目标元素的可见性发生变化时被调用。

IntersectionObserver 构造函数和方法

  • 构造函数：

    const observer = new IntersectionObserver(callback, options);

    • callback：回调函数，当目标元素的交集状态发生变化时调用。

    • options：配置选项对象，可以设置以下属性：

      • root：指定根元素，默认为 null（即视口）。
      • rootMargin：根元素的外边距，类似于 CSS 的 margin 属性。
      • threshold：触发回调函数的交集比例阈值，可以是单个数字或数组。

  • 方法：

    • observe(target): 开始观察目标元素。
    • unobserve(target): 停止观察目标元素。
    • disconnect(): 停止观察所有目标元素，并释放资源。

changes

  • changes 是一个数组，每个数组元素是一个 IntersectionObserverEntry 对象。

  • IntersectionObserverEntry 对象包含以下属性：

    • time: 观察到交集变化的时间戳。
    • target: 被观察的目标元素。
    • rootBounds: 根元素的边界矩形。
    • boundingClientRect: 目标元素的边界矩形。
    • intersectionRect: 目标元素与根元素的交集矩形。
    • intersectionRatio: 目标元素与根元素（可视窗口）的交集比例（0 到 1 之间）。

每一次观察的元素发生变化，就会在changes数组中增添一个新的 IntersectionObserverEntry 对象

结合以上知识点和代码，你可以很快的了解他们的API和用法，也建议大家联系AI食用哦~

avatar
文章
阅读
粉丝