关键词：
前两天正好写了文章如何用实现图片懒加载【性能优化】JS实现图片懒加载，今天在使用vue构建项目的时候就遇到了要做图片懒加载的优化需要，本想把前两天的代码直接copy过来的，后来想查查看有没有更简便的方法，果不其然，vue中直接有插件可以使用，看了下实现时候的效果，实现原理都和原生js是一样的，vue果然真香！
接下来我们来讲vue-lazyload插件的使用：
1、安装插件
cnpm i vue-lazyload -S
2、入口文件main.js中配置：
import Vue from ‘vue‘ import App from ‘./App.vue‘ import VueLazyLoad from ‘vue-lazyload‘ // 引入插件
import errorImg from ‘./assets/img/error.jpg‘
import loadingImg from ‘./assets/img/loading.jpg‘
Vue.config.productionTip = false Vue.use(VueLazyLoad, // 注意：此项一定要写在new Vue（）之前，否则会报错：[Vue warn]: Failed to resolve directive: lazy preload: 1.3, // 预加载高度比例 error: errorImg, // 图片路径出错时加载图片 此处 loading: loadingImg, // 预加载图片 attempt: 6, // 尝试加载图片数量 observer: true, observerOptions: rootMargin: ‘0px‘, threshold: 0.1 ) new Vue( render: h => h(App), ).$mount(‘#app‘)
3、修改图片显示方式为懒加载
// 原本img写法： <img v-for="item in imgList" :src="item.src" :alt="item.name"> // 懒加载写法： <img v-for="item in imgList" v-lazy="item.src" :alt="item.name">
注意：一定要注意第二步中的配置，切不可出现报错的那种写法。
【参考文章】
vue项目中实现图片懒加载的方法(代码片段)
对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用... 查看详情
安卓中实现界面数据懒加载
...界面的呢？这个实现起来其实很简单，就是在一个Fragment中实现多个ViewPage的切换，再在ViewPage的上面放一个TabLayout，关联起来就可以实现联动效果。如果大家感觉不太明了的话，以后我可以专门写一篇关于Fragment中放入多个ViewPag... 查看详情
vue3图片懒加载之vue3-lazy
参考技术A关于图片懒加载，之前的vue2项目中一直用的vue-lazyload插件，参考地址：GitHub-hilongjw/vue-lazyload:AVue.jspluginforlazyloadyourImageorComponentinyourapplication.，现在vue3项目中，发现作者罢工，不再友好支持了，陪伴了那么久，仍然感... 查看详情
vue项目实战65配置路由懒加载
...懒加载，即是我用的时候才加载，不用就不加载。当打包构建项目时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高... 查看详情
懒加载
懒加载实质：1.不加载全部图片2.首先显示在页面中的图，首先进行加载3.当屏幕发生滚动的时候，判断图片是否进入用户视野，来决定图片是否加载 编写步骤1.首先，不要将图片地址放到src属性中，而是放到其它属性（data-or... 查看详情
懒加载
...，当访问一个页面的时候，我们先把img元素或者其他元素图片路径替换成一张大小为1*！图片的路径（这样就只需要请求一次，俗称占位符），只有当图片出现浏览器的可视区域内时，才设置真的路径，让图片显示出来，这就是... 查看详情
如何在 grails 中实现表单构建器插件
】如何在grails中实现表单构建器插件【英文标题】：Howtoimplementformbuilderpluginingrails【发布时间】：2012-07-1305:35:00【问题描述】：哪些步骤会重现问题？1.在STS上创建grails项目：2.9.22.打开插件管理器，安装表单生成器插件。1.在NetB... 查看详情
前端实现图片懒加载(代码片段)
项目中经常会遇到多图片需要加载的情况，如果一次性全部加载完耗时较多，也较慢。这时就需要用到图片懒加载，常用的有jqueryLazyload这个插件。下载地址：https://github.com/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js使用时... 查看详情
vue尚品汇商城项目-day07vue插件-48.（了解）图片懒加载插件(代码片段)
文章目录48.（了解）图片懒加载插件本人其他相关文章链接48.（了解）图片懒加载插件图片懒加载效果就是：当网络不好时默认先显示别的默认图片，等待图片加载好后再展示新的图片（就是提供个默... 查看详情
Swift 3：如何在项目中实现 Cocoapods？
】Swift3：如何在项目中实现Cocoapods？【英文标题】：Swift3:HowtoimplementCocoapodsintoproject?【发布时间】：2017-02-1216:22:20【问题描述】：我是swift3和cocoapods的初学者，我想为我的项目实现这个https://github.com/luowenxing/MTImagePicker图像选择... 查看详情
vue项目实战65配置路由懒加载(代码片段)
...#xff0c;即是我用的时候才加载，不用就不加载。当打包构建项目时ÿ 查看详情
支持betterscroll和iscroll滚动插件的图片懒加载的插件
...插件zhanyouwei/m-lazy，是支撑BetterScroll和iScroll滚动插件的。项目地址：https://github.com/zhanyouwei/m-lazy项目介绍：https://segmentfault.com/a/11900000046 查看详情
ionic懒加载页面模块合并
...ic3默认使用了懒加载技术，相较以前预加载的版本，ionic3构建的app在首页加载时间上有较大的优化，但是，ionic3默认每个页面都会对应一个模块，对于页面较多，但是每个模块都很小的应用可能并不怎么合理。于是，尝试将几个... 查看详情
图片列表--图片懒加载(代码片段)
对于一个网站来说。访问的时候不应该直接加载所有图片，而是应该只讲浏览器窗口内的图片进行加载。当滚动的时候，在加载更多的图片。叫做图片的懒加载。通过给img自定义一个新属性，来存储图片真实的src地址，当需要加... 查看详情
图片懒加载--lazyload.js的用法
这几天公司的项目已经完成的差不多了，只剩下各种优化问题。今天着重于图片加载的优化。当一个页面需要下拉很长而且又有过多的图片要加载时，就会发生很多http请求，就会拉慢网页加载速度，用户体验不友好。... 查看详情
页面性能优化-原生js实现图片懒加载(代码片段)
在项目开发中，我们往往会遇到一个页面需要加载很多图片的情况。我们可以一次性加载全部的图片，但是考虑到用户有可能只浏览部分图片。所以我们需要对图片加载进行优化，只加载浏览器窗口内的图片，当用... 查看详情
vue项目实现路由按需加载(路由懒加载)的3种方式
为什么需要懒加载？ 像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验... 查看详情
优化-图片懒加载(代码片段)
我们开发商城项目的时候,商品图片会有很多如果在进入页面一下子就加载很多图片资源的话,会导致进入页面会很慢我们今天说到的图片懒加载,是一个优化层面的主要会有哪些优点呢?比如:加载页面会快一些,包体积会小一些网络... 查看详情