在一次活动中后端返回的图片和信息过于多,在没有配置懒加载时上线以后导致页面加载白屏点击无反应等问题,经过查询发现vue插件 vue-lazyload 是一个用来实现图片懒加载的好插件,于是实验开始
1,安装插件
npm install vue-lazyload --save-dev
2,在main.js中引入(也可以单页面引入)
import VueLazyLoad from 'vue-lazyload'; // 导入懒加载
Vue.use(VueLazyLoad,{
error:'../static/img/beg.jpg', // 加载错误时的图片
loading:'../static/img/loading.gif' // 加载时的时图片
});
3,template中写入
<li
v-for="item in hot"
:key="item.goods_id"
@click="nav(item)"
>
<img
class="img"
v-lazy="item.goods_img" // 懒加载图片
:key="item.goods_img" // 坑
>
</li>
具体这个坑是 如设置了翻页功能,且每一页都是请求的数据进行渲染。
会发现其他的数据都变了,唯独图片还是原来的图片。
由于使用的数据是父组件传过来的,第一个想到父组件axios异步请求的数据导致子组件可能数据没有动态更新。但监听了下数据,发现确实是改变了 .
解决办法只要加个key就行,
至此图片懒加载就实现完毕