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

本文实例讲述了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属性

<ul>
 <li v-for="img in list">
  <img v-lazy="img.src" >
 </li>
</ul>

对图片单独进行配置

方法1

<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }"></div>

方法2

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

在data里面声明对象

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

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

赞 (0)

相关推荐

  • Vue.js如何实现路由懒加载浅析

    前言 懒加载也就是延迟加载,不知道大家在工作中有没有发现,当你的SPA(单页应用程序)变得复杂时,打包构建后的Javascript包会变得非常大,以至于严重影响页面的加载时间.幸运的是:vue-router支持WebPack内置的异步模块加载系统.所以,那些使用较少的路由组件不必打包进bundles里,只需要在路由被访问时按需加载.话不多说了,来一起看看详细的实现过程: 使用 假设你的路由配置是这样的: import MainPage from './routes/MainPage.vue' i

  • vue路由懒加载的实现方法

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

  • vue2组件实现懒加载浅析

    vue2组件实现懒加载浅析

    一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时 三.如何与webpack配合实现组件懒加载 1.在webpack配置文件中的output路径配置chunkFilename属性 output: { pat

  • vue-router路由懒加载的实现（解决vue项目首次加载慢）

    在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用. 也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的

  • vue-router路由懒加载和权限控制详解

    vue-router路由懒加载 和权限控制,今天刚好搞了一个基于node token验证的小demo 所以下面介绍下,路由懒加载 1.为什么要使用路由懒加载呢 用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效 2.用法 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) e

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

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

  • vue实现路由懒加载及组件懒加载的方式

    一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式有两种:即使用vue异步组件 和 ES中的import 1.未用懒加载,vue中路由代码如下 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld'

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

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

  • 解析vue路由异步组件和懒加载案例

    最近研究了vue性能优化,涉及到vue异步组件和懒加载.一番研究得出如下的解决方案. 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载. 案例: 首先是组件,创建四个组件分别命名为first.second.three和four:内容如下 first <template> <div>我是第一个页面</div> </template> second <template> <div>我是第二个页面

  • 浅谈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代码分割懒加载的实现方法

    什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时 如何与webpack配合实现组件懒加载 1.在webpack配置文件中的output路径配置chunkFilename属性 output: { path: reso

随机推荐