v-lazy元素被复用。导致图片出现在错误的元素上。

hilongjw / vue-lazyload

A Vue.js plugin for lazyload your Image or Component in your application.

http://hilongjw.github.io/vue-lazyload/

MIT License

7.99k stars 865 forks source link

Open miaowwwww opened 3 months ago

miaowwwww commented 3 months ago

如图：v-lazy的兄弟节点存在v-if改变元素数量， 3s后，背景图会出现在两个元素中

miaowwwww commented 2 months ago

根本原因就是vIf导致元素被复用。方案1. 最简单的方式是在使用指令的地方加一个key。缺点就是这个key，与业务无关。人为控制很容易被遗漏方案2. 在unbind事件中，把元素复原。例如把ele.remove('background-image')