search

hilongjw / vue-lazyload

A Vue.js plugin for lazyload your Image or Component in your application.
http://hilongjw.github.io/vue-lazyload/
MIT License
8.01k stars 868 forks source link

当页面有双向绑定的时候，图片出现闪烁 #158

Open kx59717 opened 7 years ago

kx59717 commented 7 years ago

比如购物车，图片是用懒加载，而单选按钮本身是双向绑定的，此时，点击单选按钮更新了单选状态，可能是因为单选状态的属性和图片src属性是在一条数组数据里，数据更新造成图片也更新了一下数据，此时图片会闪烁，出现loading属性的图片然后恢复正常，闪的很快，快瞎了。

hilongjw commented 7 years ago

@kimixu717 please confirm that the version you are using is the latest version (v1.0.5), in the previous version, there was this problem.

kx59717 commented 7 years ago

@hilongjw I have update vue-lazyload to 1.0.5, but bug still exist. You can see my website https://pwabeta4.banggood.com/index.php?com=shopcart&t=showCartProduct , turn to the homepage and add some product to the shopcart , then turn back to the posted site, wait util the product image loaded then check the checkbox , you will find that the loading image twinkled very fast.

hilongjw commented 7 years ago

It seems like choosing checkbox to cause Vue repeated rendering the shopping cart product, This is not the flash caused by vue-lazyload. Please make sure that the operation checkbox does not cause the <li class="main js_shopping_cart"> to be destroyed, and then created again.

alloyteamzy commented 6 years ago

vue-lazyload以图片地址做key，当再次遇到已加载的图片就可以避免已缓存的图片出现一闪而过的情形。 <img v-lazy="ImgSrc" :key="ImgSrc">