vue做手机项目的时候,懒加载是非常常用的;
效果是默认不加载图片,先用一个占位符图来代替,等使用图片的时再进行加载(比如滚动到图片的时候),如果真正的图片请求出错了,用默认的出错图片来进行占位;
使用的是:https://github.com/hilongjw/vue-lazyload#requirements
这个vue-lazyload的用法还是很简单的,我用的是下这个版本(当前最新)
"vue-lazyload":"^1.0.5",
在main.js里进行引入和使用
import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload, { preLoad: 1.3, error: require('@/assets/img/dou_dou.jpg'), loading: require('@/assets/img/dou_dou.jpg'), attempt: 1 })
上面做里基础配置;这样就可以全局使用的里;
比如我的列表图片是通过设置区域背景的方式,
<div class="cover" style="position: relative; background: center center / cover no-repeat rgb(250, 250, 250);" v-lazy:background-image="item.target.cover_url" v-if="item.target.cover_url" > <div style="padding-top: 100%"></div> </div>
这样就OK了。核心是加
v-lazy
具体看它的readme介绍
<script> export default { data () { return { imgObj: { src: 'http://xx.com/logo.png', error: 'http://xx.com/error.png', loading: 'http://xx.com/loading-spin.svg' }, imgUrl: 'http://xx.com/logo.png' // String } } } </script> <template> <div ref="container"> <img v-lazy="imgUrl"/> <div v-lazy:background-image="imgUrl"></div> <!-- with customer error and loading --> <img v-lazy="imgObj"/> <div v-lazy:background-image="imgObj"></div> <!-- Customer scrollable element --> <img v-lazy.container ="imgUrl"/> <div v-lazy:background-image.container="img"></div> <!-- srcset --> <img v-lazy="'img.400px.jpg'" data-srcset="img.400px.jpg 400w, img.800px.jpg 800w, img.1200px.jpg 1200w"> <img v-lazy="imgUrl" :data-srcset="imgUrl' + '?size=400 400w, ' + imgUrl + ' ?size=800 800w, ' + imgUrl +'/1200.jpg 1200w'" /> </div> </template>
~~~
未经允许不得转载:朱邦邦 » vue2.x 图片懒加载/延迟加载基于vue-lazyload