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

I found a problem may cause images reload #481

Open Shana-AE opened 2 years ago

Shana-AE commented 2 years ago

Hi, thank you for your great lib!

Problem

I recently encountered a weird situation that image immediately reloads after switch the my carousel component

(maybe) bug causes

I used directive in my component, here is some code snippet

<carousel ...>
          <carousel-item
            v-for="..."
            :key="..."
            #default="scope">
            <div
              @click="...">
              <img
                :class="{ 'is-active': scope.isActive }"
                v-lazy="scope.url">
            </div>
          </carousel-item>
        </carousel>

after debugging, I found it may be update method in beforeUpdate hook caused this problem because when an image has been loaded, it would be added into the freeList, and later be removed from ListenerQueue. but when component update and triggered directive beforeUpdate hook, it will check if image in the ListenerQueue, add it back to ListenerQueue, and eventually cause image reloaded.

But I found it is intentionally at this commit, as I did't look much deeper into this repo, so I'm not sure whether these lines should be reverted