getBoundingClientRect实现懒加载IntersectionObserver实现懒加载以及jquery和vue中使用第三方插件快速实现懒加载的方式

最新推荐文章于 2022-08-20 14:34:00 发布

veggie_a_h

最新推荐文章于 2022-08-20 14:34:00 发布

阅读量1.5k

点赞数

分类专栏：前端面试前端知识点基础 HTML 文章标签： html 前端

本文链接：https://blog.csdn.net/wanghe1111_/article/details/123746175

版权

前端面试同时被 3 个专栏收录

27 篇文章 1 订阅

订阅专栏

前端知识点基础

21 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 0 订阅

订阅专栏

懒加载

懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。也就是当图片在窗口可视区内才会显示，图片未在页面范围内不显示。实现方式是通过src先赋值给一个预加载图片，然后data-original是真实的图片，当页面滚动此元素滑到页面可视区时，就把data-original的值赋给src。

通过getBoundingClientRect来实现懒加载

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img {
        display: block;
        width: 500px;
        height: 1000px;
        background-size: contain;
    }
</style>

<body>
    <img src="./img/预加载图片.webp" alt="" data-origin="./img/易烊千玺.webp">
    <img src="./img/预加载图片.webp" class="ww" alt="" data-origin="./img/易烊千玺.webp">
    <img src="./img/预加载图片.webp" alt="" data-origin="./img/易烊千玺.webp">
    <img src="./img/预加载图片.webp" alt="" data-origin="./img/易烊千玺.webp">
    <img src="./img/预加载图片.webp" alt="" data-origin="./img/易烊千玺.webp">
    <img src="./img/预加载图片.webp" alt="" data-origin="./img/易烊千玺.webp">
</body>
<script>
    let imgs = document.querySelectorAll("img")
    let img = document.querySelector(".ww")
    let rect = img.getBoundingClientRect()
    console.log(rect.bottom, rect.top);
    let clientHeight = document.documentElement.clientHeight //可视区高度
    function lazy(imgs) {
        imgs.forEach(img => {
            if (!img.getAttribute("data-origin")) { //显示过的图片直接return
                return
            }
            let rect = img.getBoundingClientRect()
            console.log(rect.bottom, rect.top, clientHeight);
            if (rect.bottom > 0 && rect.top < clientHeight) {//表示当前元素在可视区内
                // 那么就让图片的src转化为data-origin的值
                img.setAttribute("src", img.getAttribute("data-origin"))
                console.log(img.getAttribute("src"));
                // img.removeAttribute("data-origin")
                img.removeAttribute("data-origin")//显示过该图片，那么就清除该图片该属性，以防止以后重新获取它
            }
        })

    }

    lazy(imgs)
    document.addEventListener("scroll", function () {
        lazy(imgs)
    })
</script>

</html>

使用intersectionObserver来实现懒加载：

使用intersectionObserver来进行观察相对于监听scroll窗口滑动事件触发回调更加节省资源，因为不断滑动窗口会不断触发事件回调会非常消耗资源。所以目前推荐的懒加载是通过IntersectionObserver来实现。

IntersectionObserver交叉观察为window下原生的构造函数。

也就是目标元素和可视窗口会产生交叉区域,交叉区域发生了什么事情,然后我们需要执行什么程序。

let observer = new IntersectionObservevr(callback);//创建一个望远镜进行观察，构造函数有两个参数，但最重要的是第一个回调函数，即触发条件后触发，一般执行两次，当观察到元素时执行一次，当取消观察时触发一次。
observer.observe(dom节点) //拿起望远镜观察某个元素
observer.unobserve(dom节点) //当观察过某个dom节点之后，就需要再次观察了，使用unobserver取消观察

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>intersectionObserver</title>
</head>
<style>
    img {
        display: block;
        width: 500px;
        height: 1000px;
        background-size: contain;
    }
</style>

<body>
    <img src="./img/预加载图片.webp" alt="" data-origin="./img/易烊千玺.webp">
    <img src="./img/预加载图片.webp" class="ww" alt="" data-origin="./img/易烊千玺.webp">
    <img src="./img/预加载图片.webp" alt="" data-origin="./img/易烊千玺.webp">
    <img src="./img/预加载图片.webp" alt="" data-origin="./img/易烊千玺.webp">
    <img src="./img/预加载图片.webp" alt="" data-origin="./img/易烊千玺.webp">
    <img src="./img/预加载图片.webp" alt="" data-origin="./img/易烊千玺.webp">
</body>
<script>
    // IntersectionObserver交叉观察为window下原生的构造函数
    // 也就是目标元素和可视窗口会产生交叉区域,交叉区域发生了什么事情,然后我们需要执行什么程序
    let observer = new IntersectionObserver(callback)
    // 回调函数是有一个参数的，其为此观察者观察的所有元素所构成的数组
    function callback(entrys) {
        // console.log(entrys);
        entrys.forEach(entry => {//entry表示观察到的某个dom元素的相关内容
            console.log(entry);
            if (entry.isIntersecting) {//此dom节点是否与可视区交叉即是否出现在屏幕可视区
                let img = entry.target //获取此dom元素
                img.setAttribute("src", img.getAttribute("data-origin"))
                // entry.setAttribute("src", entry.target)
                observer.unobserve(img)//取消观察这个元素，之后在滑动到此图片位置就不会再执行回调了
            }
        })
    }

    let imgs = document.querySelectorAll("img")

    imgs.forEach(img => {
        observer.observe(img) //分别对每个图片进行观察
    })
    // observer.observe(imgs)
</script>

</html>

jquery中的懒加载插件实现懒加载

jquery中采用的是jquery-lazy插件，哪个元素需要懒加载就 $(“img.lazy”).lazyload(); 并且需要给img元素设置自定义属性 data-original=“真实图片路径”

vue中的懒加载实现方式

在vue中可以使用vue-lazy插件实现懒加载，使用方式是把img元素中的动态属性绑定:src改为v-lazy=""

//需要先安装插件：npm install vue-lazyload --save-dev
Vue.use(VueLazyload)
//修改图片显示方式为懒加载（将 :src 属性直接改为v-lazy）
<a href="javascript:;"><img v-lazy="'/static/img/' + item.productImage"></a>

veggie_a_h

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
getBoundingClientRect实现懒加载IntersectionObserver实现懒加载以及jquery和vue中使用第三方插件快速实现懒加载的方式

getBoundingClientRect实现懒加载IntersectionObserver实现懒加载以及jquery和vue中使用第三方插件快速实现懒加载的方式
复制链接

扫一扫