版权声明:本文为博主原创文章,未经博主允许不得转载。 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在打包时候无法正确解析图片。