图片懒加载、预加载_lodash有懒加载吗-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_68996071/article/details/134826599

本文讨论了自定义指令和VueHooks在实现防抖节流功能中的优缺点，涉及使用Lodash库、优化首屏加载和用户体验，以及懒加载和预加载的原理与实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题解答：

防抖节流的自定义指令和封装hooks的区别：

个人认为，自定义指令方法和封装hooks方法各有利弊：

自定义指令的方式使用方便，只需要在main.js根文件加载的时候将方法在全局注册，其他组件中就无需再引入，提高编码效率；但是缺点就是在全局注册会影响首屏加载速度；

封装hooks的方式就是在utils文件夹中创建以use开头的js文件并导出函数，这个复用的方法就像钩子一样挂着，可以做到随时被引入和调用，以此来实现高内聚低耦合的目标;但是缺点就是需要在每个使用的组件内重复做引入；

使用lodash，lodash-es库来实现防抖节流

需要先安装Lodash库：npm i lodash -S

导入debounce和throttle函数并定义到vue组件中，在mounted阶段在window对象上绑定事件处理函数，并且需要在beforeDestroy阶段移除事件监听函数;

项目中的实现：

用户在输入框中输入搜索内容时，会在停止输入后或停顿N秒间隔内才会发起请求，而不是每输入一个字就发起一次请求，减少服务器压力；

项目中的登录功能，避免用户一直点击登录按钮，造成服务器的压力；

封装的自定义指令项目整体使用80+；

4.22图片懒加载和预加载

解决了什么问题？

减少页面的初始化加载时间，提高页面的性能以及用户体验；

什么是懒加载？

图片的懒加载是等图片在用户将要看到的时候才进行加载；

什么是预加载？

预先、提前加载所需要的图片资源，加载完毕后会缓存到本地，当需要时可以马上显示出来，以达到在预览的过程中，无需等待直接预览的良好体验；

懒加载实现原理：

懒加载：利用自定义属性将图片的URL存放到图片标签身上，图片的src为空或者使用较小的图片资源代替（资源加载中）;

监听body或者其他存放图片且滚动的元素的scroll事件，在每一次事件触发时，通过使用getboundingclientrect()方法，获取图片到视口的距离小于等于0时，给img标签的src属性动态赋值，以此来实现图片懒加载；

但是直接监听scroll事件的话，比较浪费性能，所以可以使用内置的Api（IntersectionObserver）来实现，它提供了一种异步观察目标元素与其祖先元素交叉状态的方法。其祖先元素或视口被称为根；

实现代码：

   const images = document.querySelectorAll('img')
    const callback = (entries) => {
      entries.forEach(entry => {
          // 监听到出现
        if (entry.isIntersecting) {
            // 获取目标
          const image = entry.target
          image.setAttribute('src', image.getAttribute('data-src'))
            // 取消监听
          observer.unobserve(image)
        }
      })
    }
    const observer = new IntersectionObserver(callback)
    images.forEach(image => {
      observer.observe(image)
    })