实现一个函数 lazyload(images)，实现图片懒加载

推荐答案

-- -------------------- ---- -------
-------- ---------------- -
    --- ----------- - ----------------------------------------------

    ----- -------- - --- ------------------------------ -- -
        --------------------- -- -
            -- ---------------------- -
                ----- --- - -------------
                ------- - ----------------
                ------------------------
            -
        ---
    ---

    ----------------------- -- -
        ----------------------
    ---
-

本题详细解读

1. 函数定义

• lazyload(images) 是一个接受一个选择器字符串 images 的函数，用于选择需要懒加载的图片元素。

2. 获取图片元素

• let imgElements = Array.from(document.querySelectorAll(images)); 使用 document.querySelectorAll 获取所有匹配选择器的图片元素，并将其转换为数组。

3. 创建 IntersectionObserver 实例

• const observer = new IntersectionObserver((entries) => {...}); 创建一个 IntersectionObserver 实例，用于监听图片元素是否进入视口。

4. 处理 IntersectionObserver 回调

• entries.forEach(entry => {...}); 遍历所有被观察的图片元素。
• if (entry.isIntersecting) {...} 判断图片元素是否进入视口。
• img.src = img.dataset.src; 将 data-src 属性的值赋给 src 属性，从而加载图片。
• observer.unobserve(img); 停止观察已经加载的图片元素。

5. 开始观察图片元素

• imgElements.forEach(img => {...}); 遍历所有图片元素，并开始观察它们。

6. 使用示例

• 假设 HTML 中有如下图片元素：

  <img data-src="image1.jpg" class="lazyload">
  <img data-src="image2.jpg" class="lazyload">

• 调用 lazyload('.lazyload') 即可实现这些图片的懒加载。