vue

2024-07-09 10:40| 来源: 网络整理| 查看: 265

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录一、图片懒加载vue-lazyload是什么？背景：原理：二、使用步骤1.安装vue-lazyload插件2.main.js中进行引用3.使用方法总结

一、图片懒加载vue-lazyload是什么？背景：

图片是非常占用页面渲染时间的，尤其是一些图片比较多的页面，过多的图片可能会造成页面的卡顿，降低流畅度影响用户体验，我们在实际开发中，对于处于视口外的图片，在用户没有滚动到位置的时候没必要渲染，此时我们就需要用到懒加载，让图片延后渲染。 vue中有一个插件vue-lazyload，它提供了一个“vue指令”可以完成上面需求

原理：

一、获取视口底部位置，在移动端可以使用 clientHeight 来获取到视口底部的像素值，pc端可以使用getBoundingClientRect() 获取

二、收集所有img标签转成数组并保存，当然实际开发中，我们对获取方式还要加一些其他条件，避免有些不需要懒加载的图片也被收集进来，这里我就简单点了。

三、写个渲染函数用来处理图片的渲染逻辑，主要逻辑是判断当前dom节点是否在视口内

二、使用步骤 1.安装vue-lazyload插件

代码如下（示例）：

//npm npm install vue-lazyload --save-dev //yarn yarn add vue-lazyload //如果你是用Vue2.0,请不要用最新的版本，可以指定支持Vue2.0的版本 //例如： yarn add [email protected] 2.main.js中进行引用

代码如下（示例）：

import VueLazyload from "vue-lazyload"; Vue.use(VueLazyload); //建议自定义配置插件，设置相应的loading图和图片错误显示的统一图片 Vue.use(VueLazyload, { preLoad: 1.3, error: require('../src/assets/lazy/error.png'), loading: require('../src/assets/lazy/loading.gif'), attempt: 1 })

我自己有常用的loading图库，除了svg还有纯css写的loading图，喜欢的可以点击链接去下载

3.使用方法

代码如下（示例分单图和多图的使用方式）：

//单图 //多图总结

以上就是今天要分享的内容，图片懒加载在实际项目中还是很实用的嘞，先记个笔记。

【本文地址】

vue

vue

今日新闻

推荐新闻