面试的时候一直被问懒加载,预加载的问题,回答的比较含糊。利用假期做了个vue 的懒加载,具体如下。
首先你的安装 npm install vue-lazyload --save-dev 或者yarn add vue-lazyload --save-dev
然后在main.js 里面引入
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {
preLoad: 1, //比列是1
error: require('./assets/12.jpg'), // 加载错误用的 图片
loading: require('./assets/logo.png'), //j加载时候用的图片
attempt: 2 //一次加载2张
})
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
然后建立一个.vue的页面
<template>
<div id="lazyload">
<!-- img中使用图片懒加载。 v-lazy代替v-bind:src -->
<!-- <ul class="img">
<li v-for="(item) in imgList" :key="item">
<img v-lazy="item" alt="" style="width: 768px;">
</li>
</ul> -->
<!-- 背景图中使用图片懒加载。 v-lazy:background-image = "" -->
<ul class="bgImg">
<li v-for="(item) in imgList" v-lazy:background-image="item" :key="item"></li>
</ul>
</div>
</template>
<script>
export default {
data() {
return{
imgList:[
require('../assets/timg.jpg'),
require('../assets/timg.jpg'),
require('../assets/timg.jpg'),
require('../assets/timg.jpg'),
require('../assets/timg.jpg'),
require('../assets/timg.jpg'),
require('../assets/timg.jpg'),
require('../assets/timg.jpg'),
require('../assets/timg.jpg'),
require('../assets/timg.jpg'),
require('../assets/timg.jpg'),
require('../assets/timg.jpg'),
require('../assets/timg.jpg'),
require('../assets/timg.jpg'),
require('../assets/timg.jpg'),
require('../assets/timg.jpg'),
require('../assets/timg.jpg'),
],
}
}
}
</script>
<style lang="less" scoped>
#lazyload{
width: 768px;
background-color: #fcc;
margin: 0 auto;
.img{
width: 768px;
background-color: #fcc;
}
.bgImg{
li{
width: 768px;
height: 522px;
margin-bottom: 10px;
background-repeat: no-repeat;
background-size: cover;
}
}
}
</style>
效果图如下:
加载时候的样子
有点说明:这里的img标签中使用懒加载:v-lazy 代替 v-bind:src ;背景图片的用:v-lazy:background-image
然后加key 值。