vue异步加载图片路由
懒加载(图片)1.npm install vue-lazyload --save此过程是下载懒加载包,但是可能会出现权限错误,建议使用npm install vue-lazyload --save --no-optional2.在main.js中导入包并注册(看截图)import VueLazyload from ‘vue-lazyload’Vue.use(VueLazyload,...
·
- 懒加载(图片)
1.npm install vue-lazyload --save
此过程是下载懒加载包,但是可能会出现权限错误,建议使用npm install vue-lazyload --save --no-optional
2.在main.js中导入包并注册(看截图)
import VueLazyload from ‘vue-lazyload’
Vue.use(VueLazyload, {
error: ‘dist/error.png’,//这个是请求失败后显示的图片
loading: ‘dist/loading.gif’,//这个是加载的loading过渡效果
try: 2 // 这个是加载图片数量
})
3.在页面中使用v-lazy代替:src添加请求的图片地址
参数详情:
- 异步加载页面(路由)
白色框和红色框是两种写法,白色框是在整体加载,红色框是异步加载。很明显异步加载的效果更好,推荐使用。
更多推荐







所有评论(0)