关键词：
对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。
实现方法(使用vue的vue-lazyload插件)
1.安装插件
npm install vue-lazyload --save-dev2.在入口文件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）
<a href="javascript:;"><img v-lazy="'/static/img/' + item.productImage"></a>参数选项说明
图片懒加载的简单效果已经实现了，然后就可以按这开发文档的api进行扩展了：
| 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']可以省略， 当插件跟页面中的动画或过渡等事件有冲突是， 可以尝试其他选项 |
| 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 |
vuevue-cli3构建项目中实现图片懒加载(代码片段)
...加载【性能优化】JS实现图片懒加载，今天在使用vue构建项目的时候就遇到了要做图片懒加载的优化需要，本想把前两天的代码直接copy过来的，后来想查查看有没有更简便的方法，果不其然，vue中直接有插件可以使用，看了下实... 查看详情
vue图片懒加载vue-lazyload(代码片段)
在项目中，如果出现大图一时半会加载不出来的情况确实很丑。如果是那种没有给定宽高靠图片撑起来的等图片加载出来再把内容挤下去的用户体验效果非常差。在vue中使用vue-lazyload可以实现图片懒加载安装npminstallvue-lazyload--sav... 查看详情
vue使用url.createobjecturl()和懒加载优化加载图片的技巧(代码片段)
...绍事件二、URL.createObjectURL()懒加载总结前言提示：有很多项目中会有加载图片的功能，有时候由于各种原因吧，图片可能加载不出来—懒加载。提示：以下是本篇文章正文内容，下面案例可供参考一、功能介绍示例：小编介绍的... 查看详情
vue使用url.createobjecturl()和懒加载优化加载图片的技巧(代码片段)
...绍事件二、URL.createObjectURL()懒加载总结前言提示：有很多项目中会有加载图片的功能，有时候由于各种原因吧，图片可能加载不出来—懒加载。提示：以下是本篇文章正文内容，下面案例可供参考一、功能介绍示例：小编介绍的... 查看详情
vue尚品汇商城项目-day07vue插件-48.（了解）图片懒加载插件(代码片段)
文章目录48.（了解）图片懒加载插件本人其他相关文章链接48.（了解）图片懒加载插件图片懒加载效果就是：当网络不好时默认先显示别的默认图片，等待图片加载好后再展示新的图片（就是提供个默... 查看详情
vue实现一个图片懒加载插件(代码片段)
前言图片懒加载是一个很常用的功能，特别是一些电商平台，这对性能优化至关重要。今天就用vue来实现一个图片懒加载的插件。这篇博客采用“三步走”战略——Vue.use()、Vue.direction、Vue图片懒加载插件实现，逐步实现一个Vue... 查看详情
vue图片懒加载插件-vuelazyload的简单使用(代码片段)
Vuemoduleforlazyloadingimagesinyourapplications.Someofgoalsofthisprojectworthnotinginclude:Belightweight,powerfulandeasytouseWorkonanyimagetypeAddloadingclasswhileimageisloadingSupportsbothofVue1.0and 查看详情
vue项目实战65配置路由懒加载(代码片段)
...同的首页内容。本篇我们来学习通过“路由懒加载”提升项目的访问速率。一、什么是路由懒加载，为什么使用？路由懒加载，即是我用的时候才加载，不用就不加载。当打包构建项目时ÿ 查看详情
vue路由的懒加载和组件的按需加载方法(代码片段)
//aview:function(resolve)//require(["./a.vue"],resolve);//,//bview:function(resolve)//require(["./b.vue"],resolve);//aview:require("./a.vue"),bview:require("./b.vue"), “懒加载也叫延迟加载，即在需要的时候进行加载， 查看详情
vue项目中实现用户登录及token验证的实现方法(代码片段)
登录认证简单介绍登录认证的整个过程有两个部分组成，分别是用户认证和权限认证。用户认证是对用户的相关登录认证，权限认证是对已经登录的用户的操作权限识别与限制。用户认证：核对数据库用户名和密码的... 查看详情
vue3.0中用自定义指令实现图片懒加载(代码片段)
...er vue.use插件的使用vue3.0自定义指令 使用场景①每一张图片都要进行懒加载操作，在存在大量图片的列表中,为了避免大量图片一起发送网络请求而造成网络堵塞,把图片的加载变成按需的状态浏览器一般最多支持并行发送... 查看详情
vue图片lazyload(代码片段)
...速度，进去看到了一个图片懒加载的方法（哎，之前的vue项目都没有用到懒加 查看详情
vue使用url.createobjecturl()和懒加载优化加载图片的技巧(代码片段)
...件二、URL.createObjectURL()懒加载总结前言提示：有很多项目中会有加载图片的功能，有时候由于各种原因吧，图片可能加载不出来—懒加载。提示：以下是本篇文章正文内容，下面案例可供参考一、功能介绍示... 查看详情
vue项目优化首屏加载速度(代码片段)
Vue项目部署上线后经常会发现首屏加载的速度特别慢：那么有那写能做的简单优化呢一、路由的懒加载路由懒加载也就是把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。 结合Vue的异步... 查看详情
vue项目优化之路由懒加载(代码片段)
path:‘/login‘,name:‘登录页面‘,hidden:true, meta:title:‘Readme‘,icon:‘el-icon-menu‘,component:resolve=>require([‘../views/login/Login.vue‘],resolve) 查看详情
vue-lazyload图片懒加载的简单使用(代码片段)
一、vuelazyload插件：插件地址：https://github.com/hilongjw/vue-lazyloaddemo：http://hilongjw.github.io/vue-lazyload/二、简单使用实例：这个插件还是蛮好用的，就是感觉这个插件的开发文档有点太啰嗦了，一股脑把所有的api扩展都罗列出来，源... 查看详情
vue项目性能优化(代码片段)
Vue代码层面优化1)v-for遍历列表2)图片资源懒加载3)路由组件懒加载4)第三方插件的按需引入5)大数组优化1:冻结响应式数据6)大数组优化2:虚拟列表7)事件销毁2.webpack配置层面优化1)兼容性处理2)拆分打包与压缩3)资源预加载(prefetch)4)... 查看详情
vue路由懒加载(代码片段)
...分割会是什么效果呢。所有的代码都打包到app.js中，如果项目巨大，那么首 查看详情