vue-lazyload 懒加载 一些注意事项

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Tomhs3000/article/details/80856117

一、简介

懒加载可以说的上是很基础的功能了，但是平时也用的非常广泛。在vue中有很多懒加载的插件，今天给大家带来一个我比较常用的插件的一些注意事项。

二、安装

$ npm install vue-lazyload -D

三、官方链接

这里附上官方文档链接 vue-lazyload

四、注意事项

栗子代码(此处将本地图片地址改为了接口请求到的图片地址，其他同官方文档)

<div v-lazy-container="{ selector: 'img' }">
  <img 
    :data-src="xxx.img_url" 
    :data-error="xxx.errorimg_url">  
</div>

官方文档上面demo上面的写的还是蛮具体的，我就不多重复了。

之类有一个重中之重的坑需要填。

当图片的数据更新时，举个栗子，你设置了翻页功能，且每一页都是请求的数据进行渲染。

你会发现一个神奇的事情，那就是其他的数据都变了，唯独图片还是原来的图片。

王德发？？？？

由于使用的数据是父组件传过来的，第一个想到父组件axios异步请求的数据导致子组件可能数据没有动态更新。。

遂监听了下数据，发现确实是改变了.........

那么真相只有一个了，肯定是我没有调用update()方法（jq里的lazyload是可以手动刷新的）。

于是去把文档都翻烂了..还是没有找到update()方法...因为确实没有update()方法......

而真正的解决办法只要加个key就行......只要加个key就行......key就行......行......而这个改动文档里是没有的...下次还是自己写吧....

下面附上正确办法，以官方的两个例子，其他的类推就行，key内容为图片地址

<div v-lazy-container="{ selector: 'img' }" :key=""xxx.img_url>
  <img 
    :data-src="xxx.img_url" 
    :data-error="xxx.errorimg_url">  
</div>

  <li v-for="img in list">
    <img v-lazy="img.src" :key="img.src" >
  </li>

最最最后的ps:假设使用的本地占位图，占位图位置如果在static文件夹内可以直接引入路径，而如果再assets文件夹内的话需要以require('img.src')的方式引入图片，不这么写会导致webpack在打包时候无法正确解析图片。