当前位置: 开发笔记 > 前端 > 正文

vue实现图片懒加载的方法分析

作者：吴台吉国瑋智仁 | 来源：互联网 | 2022-02-25 20:58

这篇文章主要介绍了vue实现图片懒加载的方法,结合实例形式分析了vue.js图片懒加载插件安装、使用方法与相关操作注意事项,需要的朋友可以参考下

本文实例讲述了vue实现图片懒加载的方法。分享给大家供大家参考，具体如下：

vue图片懒加载使用

首先第一步，安装插件

vue-lazyload

npm install vue-lazyload --save-dev

在man.js中引入插件

import VueLazyLoad from 'vue-lazyload'

使用

Vue.use(VueLazyLoad,{
error:'', //加载失败的图
loading:'' //加载中的默认图
})

这是一个最简单的配置

官方的详细扩展配置文档

key	description	default	options
`preLoad`	proportion of pre-loading height（预加载高度比例）	`1.3`	`Number`
`error`	src of the image upon load fail（图片路径错误时加载图片）	`'data-src'`	`String`
`loading`	src of the image while loading（预加载图片）	`'data-src'`	`String`
`attempt`	attempts count（尝试加载图片数量）	`3`	`Number`
`listenEvents`	events that you want vue listen for （想要监听的vue事件）默认['scroll']可以省略，当插件跟页面中的动画或过渡等事件有冲突是，可以尝试其他选项	`['scroll'（默认）,` `'wheel',` `'mousewheel',` `'resize',` `'animationend',` `'transitionend',` `'touchmove']`	Desired Listen Events
`adapter`	dynamically modify the attribute of element （动态修改元素属性）	`{ }`	Element Adapter
`filter`	the image's listener filter（动态修改图片地址路径）	`{ }`	Image listener filter
`lazyComponent`	lazyload component	`false`	Lazy Component
`dispatchEvent`	trigger the dom event	`false`	`Boolean`
`throttleWait`	throttle wait	`200`	`Number`
`observer`	use IntersectionObserver	`false`	`Boolean`
`observerOptions`	IntersectionObserver options	{ rootMargin: '0px', threshold: 0.1 }	IntersectionObserver

实现懒加载，使用v-lazy代替src属性

对图片单独进行配置

方法1

方法2

将v-lazy='obj' 赋值一个对象

在data里面声明对象

可以设置三个属性 src 图片 loading加载状态下的图片 error错误状态下的图片

希望本文所述对大家vue.js程序设计有所帮助。

npm
vue.js

推荐阅读

vue.js
Vue.js 中实现网络请求的方法与最佳实践

在 Vue.js 中实现网络请求的方法与最佳实践包括使用 `vue-resource` 插件。首先，通过命令 `npm install vue-resource --save` 安装该插件，确保添加 `--save` 参数以将依赖项记录到 `package.json` 文件中。此外，推荐使用 `axios` 作为替代方案，因为它提供了更强大的功能和更好的性能。在项目中引入并配置 `axios`，可以实现更高效、灵活的网络请求管理。 ... [详细]

蜡笔小新 2024-11-07 10:40:55
vue.js
Vue.js 前端框架中使用 vuei18n 实现多语言支持的详细指南

本文详细介绍了在 Vue.js 前端框架中集成 vue-i18n 插件以实现多语言支持的方法。通过具体的配置步骤和示例代码，帮助开发者快速掌握如何在项目中实现国际化功能，提升用户体验。同时，文章还探讨了常见的多语言切换问题及解决方案，为开发人员提供了实用的参考。 ... [详细]

蜡笔小新 2024-11-05 20:00:42
vue.js
深入解析 Vue 中的 Axios 请求库

本文深入探讨了 Vue 中的 Axios 请求库，详细解析了其核心功能与使用方法。Axios 是一个基于 Promise 的 HTTP 客户端，支持浏览器和 Node.js 环境。文章首先介绍了 Axios 的基本概念，随后通过具体示例展示了如何在 Vue 项目中集成和使用 Axios 进行数据请求。无论你是初学者还是有经验的开发者，本文都能为你解决 Vue.js 相关问题提供有价值的参考。 ... [详细]

蜡笔小新 2024-11-03 19:54:00
vue.js
基于Node.js、EJSExcel、Express与Vue.js构建Excel转JSON工具：首阶段——Vue.js项目初始化及开发环境配置

在近期的一个H5游戏开发项目中，需要将Excel数据转换为JSON格式。经过调研，市面上缺乏合适的工具满足需求。因此，决定利用Node.js、EJSExcel、Express和Vue.js自行构建这一工具。本文主要介绍项目的第一阶段，即Vue.js项目的初始化及开发环境的配置过程，详细阐述了如何搭建高效的前端开发环境，确保后续功能开发的顺利进行。 ... [详细]

蜡笔小新 2024-10-26 07:41:45
vue.js
开源组件是什么意思_iView 发布微信小程序 UI 组件库 iView Weapp

末尾有彩蛋。过去的两年里，iView开源项目已经帮助成千上万的开发者快速完成网站开发，大幅度提高了开发效率，成为Vue.js生态里重要的一 ... [详细]

蜡笔小新 2024-10-21 18:59:04
上传
利用 Node.js 和 Express（4.x 及以上版本）构建高效文件上传功能

本文介绍了如何使用 Node.js 和 Express（4.x 及以上版本）构建高效的文件上传功能。通过引入 `multer` 中间件，可以轻松实现文件上传。首先，需要通过 `npm install multer` 安装该中间件。接着，在 Express 应用中配置 `multer`，以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置，帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]

蜡笔小新 2024-11-11 18:02:17
vue.js
深入解析 Vue.js 的设计与实现：第三章详解

在《深入解析 Vue.js 的设计与实现》第三章中，详细探讨了 Vue.js 渲染器与虚拟 DOM 的机制。通过 JavaScript 对象来模拟实际的 DOM 结构，例如，`const vNode = { tag: 'div', props: { ... } }`，这种方式不仅提高了性能，还增强了组件的可维护性和灵活性。本章进一步分析了虚拟 DOM 的创建、更新及优化策略，为开发者提供了深入了解 Vue.js 内核工作的视角。 ... [详细]

蜡笔小新 2024-10-30 13:42:10
vue.js
[Vue.js 3.0] Migration – vif vs. vfor Precedence

[Vue.js 3.0] Migration – vif vs. vfor Precedence ... [详细]

蜡笔小新 2024-10-25 12:20:08
vue.js
深入解析 Vue 模板语法中的 v-cloak 指令应用与优化技巧

### 一、指令概述指令是 Vue 中的一种特殊属性，用于增强 HTML 元素的功能。它们以 `v-` 开头，如 `v-cloak`。### 二、`v-cloak` 指令的应用`v-cloak` 指令主要用于解决页面加载过程中未编译的 Vue 插值表达式短暂显示的问题。在 Vue 实例编译完成之前，带有 `v-cloak` 的元素将被隐藏，从而避免了“闪动”现象。通过结合 CSS 样式，可以进一步优化用户体验，确保页面在初始加载时保持整洁和专业。 ... [详细]

蜡笔小新 2024-10-24 19:28:12
vue.js
Vue.js 开发者必备：高效安装与调试工具指南

为了帮助 Vue.js 开发者提高开发效率，本文介绍了几种高效的安装与调试工具。首先，需要下载相关工具的压缩包，然后在谷歌浏览器中访问 `chrome://extensions` 页面，启用开发者模式，点击“加载已解压的扩展程序”按钮，并选择之前解压的文件夹。此外，我们还推荐使用一些流行的 Vue.js 调试插件，如 Vue Devtools，以进一步提升开发体验。 ... [详细]

蜡笔小新 2024-10-24 11:28:22
vue.js
Vue.js 2.0 生命周期详解与应用实例分析

一、声明周期图例图片来源：https:www.jianshu.compd61f55da98fb?fromtimeline 二、分析1、newVue()创建vue实例，其实 ... [详细]

蜡笔小新 2024-10-23 18:20:39
vue.js
2017年9月7日前端技术动态与资讯汇总

2017-09-07前端日报精选JavaScriptEventLoop机制详解与Vue.js中实践应用Redux基础与实践如何用js获取虚拟键盘高度？（ ... [详细]

蜡笔小新 2024-10-22 19:15:38
vue.js
使用vue.js实现checkbox的全选，和多个的删除

使用vue.js实现checkbox的全选，和多个的删除欢迎大家来我的博客浏览更多的干货内容www.jaxqin.comtemplate代码：<template> ... [详细]

蜡笔小新 2024-10-20 17:06:58
vue.js
个人总结_软件工程课程——个人总结

本文由编程笔记#小编为大家整理，主要介绍了软件工程课程——个人总结相关的知识，希望对你有一定的参考价值。前言时长4个与的软件工程实践结束。Alpha与B ... [详细]

蜡笔小新 2024-10-17 09:18:58
vue.js
VUEMVVMpart10Computed

看这篇之前，如果没有看过之前的文章，移步拉到文章末尾查看之前的文章。回顾先捋一下，之前我们实现的Vue类，主要有一下的功能：属性和方法的代理proxy监听属性watcher事件对于 ... [详细]

蜡笔小新 2024-10-15 17:20:22

吴台吉国瑋智仁

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章