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

懒加载

懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。也就是当图片在窗口可视区内才会显示,图片未在页面范围内不显示。实现方式是通过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>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

veggie_a_h

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值