lodash实现防抖节流，图片懒加载

最新推荐文章于 2024-06-27 13:36:25 发布

努力的琦琦

最新推荐文章于 2024-06-27 13:36:25 发布

阅读量696

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_48210599/article/details/108479823

版权

net::ERR_CONNECTION_TIMED_OUT

这个问题是因为，断开网络后，又继续开始vue服务时提示的报错，关闭项目服务,重新启动项目就可以了。。。。

lodash实现防抖节流

1，安装lodash

cnpm i lodash -S

第二步引入main.js中

import _ from 'lodash'
Vue.prototype._ = _

第三步页面中引入

import _ from "lodash";

第四步运用方法

searchUsers: _.debounce(function() {
      userlist({
        query:this.input3,
        pagenum: this.page,
        pagesize: this.pagesize
      }).then(res => {
        this.total = res.data.data.total;
        console.log(res);
        this.tableData = res.data.data.users;
      });
    }, 500)
    第一个为方法，第二个为间隔时间

图片懒加载

什么是懒加载

懒加载突出一个“懒”字，懒就是拖延迟的意思，所以“懒加载”说白了就是延迟加载，比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载。

为什么要懒加载

懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载出来用户也早就走了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。

总结出来就两个点：

1.全部加载的话会影响用户体验

2.浪费用户的流量，有些用户并不像全部看完，全部加载会耗费大量流量。

三.懒加载的实现原理？

由于网页中占用资源较多的一般是图片，所以我们一般实施懒加载都是对图片资源而言的，所以这里的实现原理主要是针对图片。

大家都知道，一张图片就是一个img标签，而图片的来源主要是src属性。浏览器是否发起亲求就是根据是否有src属性决定的。

既然这样，那么我们就要对img标签的src属性下手了，在没进入可视区域的时候，我们先不给这个img标签赋src属性，这样岂不是浏览器就不会发送请求了。

总结：我们知道了从img标签下手，那么更重要的就是可视区域的判断了，这就是整篇文章的核心之处了。

四.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片懒加载</title>
    <style>
        img {
            display: block;
            width: 100%;
            height: 300px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <img data-src="./images/1.jpg" alt="">
    <img data-src="./images/2.jpg" alt="">
    <img data-src="./images/3.jpg" alt="">
    <img data-src="./images/4.jpg" alt="">
    <img data-src="./images/5.jpg" alt="">
    <img data-src="./images/6.jpg" alt="">
    <img data-src="./images/7.jpg" alt="">
    <img data-src="./images/8.jpg" alt="">
    <img data-src="./images/9.jpg" alt="">
    <img data-src="./images/10.jpg" alt="">
    <img data-src="./images/1.jpg" alt="">
    <img data-src="./images/2.jpg" alt="">
</body>
<script>
        var imgs = document.querySelectorAll('img');

        //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
        function getTop(e) {
            var T = e.offsetTop;
            while(e = e.offsetParent) {
                T += e.offsetTop;
            }
            return T;
        }

        function lazyLoad(imgs) {
            var H = document.documentElement.clientHeight;//获取可视区域高度
            var S = document.documentElement.scrollTop || document.body.scrollTop;
            for (var i = 0; i < imgs.length; i++) {
                if (H + S > getTop(imgs[i])) {
                    imgs[i].src = imgs[i].getAttribute('data-src');
                }
            }
        }

        window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
            lazyLoad(imgs);
        }
</script>
</html>