vue项目实现图片懒加载的简单步骤

目录
  • 1、安装vue-lazyload插件
  • 2、在main.js中进行引用
  • 3、使用（将图片设置为懒加载）
  • 总结

1、安装vue-lazyload插件

npm install vue-lazyload --save-dev

2、在main.js中进行引用

import VueLazyload from "vue-lazyload";

Vue.use(VueLazyload);

//或者自定义配置插件
Vue.use(VueLazyload, {
preLoad: 1.3,
error: require('../src/assets/image/error.png'),
loading: require('../src/assets/image/loading.gif'),
attempt: 1
})

注意：

这里存在一个坑，当图片放在 assets文件下 的时候，要使用上面的这种 require(‘相对路径’）的写法来进行引入。当图片放在 static文件下 的时候就可以直接写路径来进行引入，像下面的写法一样。

static文件图片引入方法：

Vue.use(VueLazyload, {
preLoad: 1.3,
error: '../src/assets/image/error.png',
loading: '../src/assets/image/loading.gif',
attempt: 1
})

各个自定义配置属性含义：

key description default options
preLoad 预压高度比例 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 尝试计数 3 Number
listenEvents 想要监听的事件 [‘scroll’, ‘wheel’, ‘mousewheel’, ‘resize’, ‘animationend’, ‘transitionend’, ‘touchmove’] Desired Listen Events
adapter 动态修改元素属性 { } Element Adapter
filter 图片监听或过滤器 { } Image listener filter
lazyComponent lazyload 组件 false Lazy Component
dispatchEvent 触发dom事件 false Boolean
throttleWait throttle wait 200 Number
observer use IntersectionObserver false Boolean
observerOptions IntersectionObserver options { rootMargin: ‘0px’, threshold: 0.1 } IntersectionObserver
silent do not print debug info true Boolean

3、使用（将图片设置为懒加载）

<img v-lazy="psdimg" class="psd" />

注意：

当遇到是v-for循环的时候，或者用div包裹着img的时候，需要在div上面添加 v-lazy-container="{ selector: ‘img’ }"

<div v-lazy-container="{ selector: 'img' }">
  <img data-src="https://aaa.com/img1.jpg">
  <img data-src="https://aaa.com/img2.jpg">
  <img data-src="https://aaa.com/img3.jpg">
</div>

<!--或者这种：-->

 <div v-lazy-container="{ selector: 'img' }" v-html="content">
</div>

如果是这种情况的话，一定要使用 data-src 来指定路径，而不使用v-lazy。因为如果使用的是v-lazy的话，拿到了图片地址也会一直显示不出来。

总结

到此这篇关于vue项目实现图片懒加载的文章就介绍到这了,更多相关vue图片懒加载内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue路由元信息与懒加载和模块拆分详细介绍

    Vue路由元信息与懒加载和模块拆分详细介绍

    目录 1. 路由元信息 2. 路由懒加载和模块拆分 1. 路由元信息 描述: 元信息就是对于路由规则的额外补充信息,也就是在定义路由的时候可以配置 meta 字段. 元信息通俗点来说,就是写给程序看的注释. 语法: const router = new VueRouter({ routes: [ { path: '/admin', component: Admin, // 元信息 meta: {login:true} } ] }) 使用: 路由规则(new.js): import News fr

  • vue 路由懒加载详情

    vue 路由懒加载详情

    目录 1.什么是路由懒加载 2.路由懒加载的使用 1.什么是路由懒加载 官方的解释: 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载. 如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 官方想表达的意思 首先,我们知道路由中通常会定义很多不同的页面 这个页面最后会被打包到哪里呢?一般情况下是会放在一个js文件中 但是页面这么多,所有文件都放到一个js文件中,必然会造成这个页面会非常的大 如果我们一次性从服务器中请求下

  • vue项目中图片懒加载时出现的问题及解决

    vue项目中图片懒加载时出现的问题及解决

    目录 vue图片懒加载的问题 vue图片懒加载实现步骤 vue图片懒加载踩过的坑 今天踩过的坑总结 vue图片懒加载的问题 项目中遇到一个问题,记录一下,vue项目中前期没有做图片懒加载的时候,当图片出现错误或者显示路径不对,我加了onerror事件进行错误监听并添加一张默认的图片,优化用户体验. 后期因为图片数量变多,所以加入了图片懒加载,但在懒加载中挂载时只加了loading的图片,没有加error,所以导致页面图片未正常加载的地方出现默认图片闪烁的现象,最后在挂载时加入error引入一张默

  • 详解vue-router 路由元信息

    一.背景 之前写前端都是后端返回界面,跳转神马的完全不用自己操心,但是这次用 vue 写的前端,第一次前后端分离,后端只给前端提供数据接口,一开始还想着是后端控制界面的渲染神马的,但是后面一想,路由神马的都是前端控制的,后端的手伸不过来啊,于是乎就一直在逛 vue-router 的官网,想着应该会有相关的东西,然后发现了路由元信息,起初怎么也没看懂是什么意思,后面慢慢琢磨明白了,记录一下 二.代码分析 官网路由元信息 (1)路由定义 const router = new VueRouter({

  • vue实现一个懒加载的树状表格实例

    vue实现一个懒加载的树状表格实例

    目录 一个懒加载的树状表格实例 安装 模板 js代码 使用el-table懒加载树形表格时的注意点 1.版本问题 2.数据显示 3.滚动条 4.数据结构 5.el-table的fixed导致的问题 一个懒加载的树状表格实例 实现一个树状表格,需要用到vxe-table这个库,虽然element-ui也能实现,但这个库是专门针对表格做了更多的拓展,功能更多一些. 接下来,说一下使用方式. 安装 npm install xe-utils vxe-table // 入口文件引入,一般是main.js

  • vue项目实现图片懒加载的简单步骤

    目录 1.安装vue-lazyload插件 2.在main.js中进行引用 3.使用(将图片设置为懒加载) 总结 1.安装vue-lazyload插件 npm install vue-lazyload --save-dev 2.在main.js中进行引用 import VueLazyload from "vue-lazyload"; Vue.use(VueLazyload); //或者自定义配置插件 Vue.use(VueLazyload, { preLoad: 1.3, error:

  • 浅谈vue中使用图片懒加载vue-lazyload插件详细指南

    在vue中使用图片懒加载详细指南,分享给大家.具体如下: 说明 当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点. 使用方式 使用vue的 vue-lazyload 插件 插件地址:https://www.npmjs.com/package/vue-lazyload 案例 demo: 懒加载案例demo Installation 安装方式 npm $ npm i vue-lazyload -D CDN CDN: https:

  • Vue实现一个图片懒加载插件

    前言 图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.direction.Vue图片懒加载插件实现,逐步实现一个Vue的图片懒加载插件. Vue.use() 就像开发jQuery插件要用$.fn.extent()一样,开发Vue插件我们要用Vue.use().其实就是官方内部实现的一个方法,供广大开发者灵活开发属于自己的插件.只需要按照约定好的规则开发就行. 用

  • JS图片懒加载库VueLazyLoad详解

    目录 背景 说明 实现原理 1. placeholder 的实现很细致和灵活 2. 添加图片缓存 3. 事件监听使用节流 4. 监听事件不止滚动事件 5. 事件列队的方式来处理懒加载 6. 支持 data-srcset 7. 自定义控制可视区的判定范围 待完善 1. 没有解决布局抖动 2. 跳过已经加载图片的判断方式 3. 局部懒加载 4. 性能不是很好 5. observer 模式配置简单 6. SEO 不友好 总结 背景 上篇<图片懒加载原理方案详解>中详细解析了图片懒加载的原理和方案.主

  • Vue自定义图片懒加载指令v-lazyload详解

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: <img v-lazyload="imageSrc" > imageSrc是要加载的图片的实际路径. 为了实现这个指令,我们首先单独建立一个文件,名字为lazyload.js.并填写基本的代码,如下: //Vue 图片懒加载,导出模块 export default (Vue , o

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

    本文实例讲述了vue实现图片懒加载的方法.分享给大家供大家参考,具体如下: vue图片懒加载使用 首先第一步,安装插件 vue-lazyload npm install vue-lazyload --save-dev 在man.js中引入插件 import VueLazyLoad from 'vue-lazyload' 使用 Vue.use(VueLazyLoad,{ error:'', //加载失败的图 loading:'' //加载中的默认图 }) 这是一个最简单的配置 官方的详细扩展配置文

  • vue 实现图片懒加载功能

    vue 实现图片懒加载功能

    一个页面图片比较多的时候,需要对界面的图片进行懒加载处理,今天遇到了,做个懒加载的笔记. 1,需要安装vue的懒加载插件. npm install vue-lazyload --save-dev 2,需要在main.js里面进行引用. import VueLazyload from "vue-lazyload"; Vue.use(VueLazyload); 或者自定义 Vue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png

  • Vue lazyload图片懒加载实例详解

    Vue lazyload图片懒加载实例详解

    文档:https://github.com/hilongjw/vue-lazyload 1.安装 cnpm i vue-lazyload -S 或 npm i vue-lazyload -S 2.实例 导入配置等操作 src/main.js import Vue from 'vue' import App from './App' import router from './router' //[1]导入懒加载 import VueLazyload from 'vue-lazyload' Vue

  • vue3+typescript实现图片懒加载插件

    github项目地址: github.com/murongg/vue- 求star 与 issues 我文采不好,可能写的文章不咋样,有什么问题可以在留言区评论,我会尽力解答 本项目已经发布到npm 安装: $ npm i vue3-lazyload # or $ yarn add vue3-lazyload 需求分析 支持自定义 loading 图片,图片加载状态时使用此图片 支持自定义 error 图片,图片加载失败后使用此图片 支持 lifecycle hooks,类似于 vue 的生命周

随机推荐