vue项目实现图片懒加载
当用户打开一个页面时,页面会一次性加载所有的图片,这时则可能会影响整个页面的性能,针对这个问题我们可以使用vue-lazyload插件对图片进行懒加载,当图片需要显示时在进行加载
1.第一步安装vue-lazyload插件
npm install vue-lazyload --save
2.第二步在main.js文件下导入和使用插件:
import VueLazyload from 'vue-lazyload'
3.使用插件
Vue.use(VueLazyload) //基本用法
也可以在使用插件是传入一个对象
Vue.use(VueLazyload,{
loading:require("img.src")
})
(可以在loading属性中传入一张图片,在页面加载图片的过程中进行顶替)
4.将img标签的src属性改成v-lazy,如下:
<img v-lazy="img.src"/>