原生实现img-lazyLoad:图片延迟加载（基于intersection Observer）

shuibo 发布于2019-08-23 15:05 / 3519人阅读

摘要：接下来，我们需要利用对这些暂时看不见的图片元素进行观察，当确认他们滚动到了窗体的可视区域时，我们在回调函数中对其进行加载。创建一个，配置元素和回调函数触发机制，这里我们将这个设为。

点击查看视频教程哦！！！！ intersection Observer简介

点击查阅MDN关于此api的使用说明

这个api是用来检测dom元素交集的，常见的应用场景之一就是本文提到的对图片进行懒加载，即：拖动窗口滚动条，到达当前这个图片的时候，再去读取挂在自定义属性（比如："data-src"）上的url地址，之后将该url地址写到到src属性上去进行下载、展示这个图片。因此，我们关注的重点是：该图片是否滚动到了当前窗口的可视区域。通常解决的办法是，监听窗口元素的scroll事件，在事件处理程序中对图片的位置做判断。然而，这么做的一个弊端是，因为js是单线程的，而scroll事件出现的又很密集，每次都去响应scroll事件可能会影响用户体验。

intersection Observer的诞生就是为了处理这种类似于上文提到的元素交集检测。它会观察我们的目标元素，当目标元素出现在root元素的可视区域时便会触发一个（我们事先放进去的）回调函数，于是我们可以在回调函数里面处理业务逻辑。

这里出现了两个小概念，对应于本文实现的图片懒加载功能来说：

目标元素：指的就是那些我们需要懒加载的图片

root元素指的就是目标元素的父窗口，比如这里的图片的父元素容器

利用intersection Observer实现懒加载

点此查看该案例的stackblitz

查看该案例：

在index.html页面内有一个scrollContainer，在里面首先是放了几段文字，之后是5个img元素，并将img的url地址写在了自定义属性"data-src"内。

在css文件内定义了一些样式，其中，move-in是在我们对图片真正进行加载时才会添加的动画效果。

现在，无论我们怎么拖动滚动条都无法看见图片，因为我们仅仅是把img的url写在了自定义属性中而不是src属性中。接下来，我们需要利用intersection Observer对这些暂时看不见的图片元素进行观察，当确认他们滚动到了窗体的可视区域时，我们在回调函数中对其进行加载。

创建一个observer：

const observer = new IntersectionObserver(callback，option)

option配置root元素和回调函数触发机制，这里我们将scrollContainer这个div设为root。
callback就是当检测到目标元素与root元素交集时会调用的函数，形如：

(entrances, observer)=>{
    // entrances是个数组对象，包含了所有的目标元素，通常我们会遍历它们，并判断每一个多带带的个体是否与root元素产生了交集，如果是，那么我们就会执行一些逻辑
}

连接目标元素

刚才我们创建了observer，并且设置了它的root元素，现在需要告诉这个observer，我们需要观察哪些目标元素与此root元素的交集。
通过observer.observe(target)进行链接

最终的代码

const imgs = document.querySelectorAll("img") //获取所有待观察的目标元素
var options = {
  root: document.querySelector(".scrollContainer"), 
  rootMargin: "0px",
  threshold: 1.0
}
function lazyLoad(target) {
  const observer = new IntersectionObserver((entrances, observer) => {
    entrances.forEach(entrance => {
      if (entrance.isIntersecting) {
        const img = entrance.target;
        const src = img.getAttribute("data-src");
        img.setAttribute("src", src)
        img.classList.add("move-in")
        observer.disconnect()
      }

    })
  }, options);
  observer.observe(target)
}

imgs.forEach(lazyLoad)

私有云超融合服务器延迟加载图片 js实现图片预加载 js实现数据的懒加载图片原生js实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101479.html

图像延迟加载 && 列表图顺序加载

摘要：此外，跟踪尚未延迟加载的元素数量，以及取消绑定滚动事件处理程序的繁琐工作将由开发者来完成。图像延迟加载列表图顺序加载的组件已经开源啦有兴趣的同学可以查看使用起来非常简单图片延时加载十分重要，尤其是对于移动端用户。从理论上来看，图像延迟加载机制十分简单，但实际上却有很多需要注意的细节。此外，有多个不同的用例均受益于延迟加载。首先，我们来了解一下在 HTML 中延迟加载内联图像。延迟加载...

ghnor 2019-05-23 17:33 评论0 收藏0
Intersection observer检测元素是否在视窗内

摘要：新检测原理允许你配置一个回调函数，每当进入浏览器视窗时，触发回调函数。回调函数案例源码地址元素和元素相交程度达到该值的时候注册的回调函数将会被执行。默认值是意味着只要有一个像素出现在元素中，回调函数将会被执行。前言一直以来，检测元素在浏览器视窗口内不是件容易的事，很多解决方案都不能很准确的判断，计算量也有可能拖慢网站性能。但是很多场景都需要用到：当页面滚动时，懒加载图片或其他内...

HollisChuang 2019-08-23 14:28 评论0 收藏0
组件复用那些事儿 - React 实现按需加载轮子

摘要：同时，懒加载按需加载概念至关重要。时至今日，这些实现懒加载脚本的代码仍有学习意义。代码实战下面让我们动手实现一个按需加载轮子。同样，对于组件也可以使用无状态组件函数式组件实现这样无疑更加简洁。组件化在当今前端开发领域中是一个非常重要的概念。著名的前端类库，比如 React、Vue 等对此概念都倍加推崇。确实，组件化复用性（reusability）和模块性（modularization...

lidashuang 2019-08-22 16:24 评论0 收藏0
组件复用那些事儿 - React 实现按需加载轮子

摘要：同时，懒加载按需加载概念至关重要。时至今日，这些实现懒加载脚本的代码仍有学习意义。代码实战下面让我们动手实现一个按需加载轮子。同样，对于组件也可以使用无状态组件函数式组件实现这样无疑更加简洁。组件化在当今前端开发领域中是一个非常重要的概念。著名的前端类库，比如 React、Vue 等对此概念都倍加推崇。确实，组件化复用性（reusability）和模块性（modularization...

red_bricks 2019-08-05 13:36 评论0 收藏0
组件复用那些事儿 - React 实现按需加载轮子

摘要：同时，懒加载按需加载概念至关重要。时至今日，这些实现懒加载脚本的代码仍有学习意义。代码实战下面让我们动手实现一个按需加载轮子。同样，对于组件也可以使用无状态组件函数式组件实现这样无疑更加简洁。组件化在当今前端开发领域中是一个非常重要的概念。著名的前端类库，比如 React、Vue 等对此概念都倍加推崇。确实，组件化复用性（reusability）和模块性（modularization...

K_B_Z 2019-08-02 10:14 评论0 收藏0