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',
loading: 'dist/loading.gif',
attempt: 1
})

3,修改图片的路径，设置为懒加载的形式，将src改成v-lazy

 <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://domain.com/img1.jpg">
  <img data-src="https://domain.com/img2.jpg">
  <img data-src="https://domain.com/img3.jpg">  
</div>
 
或者这种：

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

以及我将html里面的图片路径拿到后，转换成懒加载的时候，

一定是 data-src，而不是v-lazy，要不然在接口获取的时候，拿到了图片地址，但是会一直显示不出来的。

以上就是vue 实现图片懒加载功能的详细内容，更多关于vue 图片懒加载的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 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-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的路由懒加载,分享给大家,具体如下: 我们可以把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件. component可以是一个箭头函数,我们可以使用动态 import语法来定义代码分块点: 如果想在network里面看到动态加载的组件名字,可以加webpackChunkName: 同时要在webpack.base.conf.js里面的output里面的filename下面加上chunkFileName 代码 // router里面的index.js i

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

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

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

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

  • 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

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

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

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

  • 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使用el-tree 懒加载进行增删改查功能的实现

    Vue使用el-tree 懒加载进行增删改查功能的实现

    关于vue的树形展示 使用到项目:以树的形式异步展现 效果图先放: 找到element-ui的官方文档,el-tree.(地址:https://element.eleme.cn/#/zh-CN/component/tree ) 项目需求:以懒加载的形式展示,目录根据需求需要有新增 编辑 删除 操作以及操作后的刷新树结构 那我们现在开始吧 一. 懒加载:Tree的懒加载,用一个属性控制:lazy.使用lazy,就要使用load来加载数据进行渲染树 原理:初始化触发load函数先加载初始数据,通过点

随机推荐