murongg / vue3-lazyload

A Vue3.x image lazyload plugin
https://murongg.github.io/vue3-lazyload/
166 stars 19 forks source link

The delay parameter is faulty on the vue3 router. Procedure #34

Open popdo opened 1 year ago

popdo commented 1 year ago

After delay is set, the router switch of vue3 will always display the previous page.

My router-wiew Settings:

<router-view v-slot="{ Component }">
       <keep-alive>
            <component :is="Component" :key="$route.path" />
       </keep-alive>
</router-view>

Use the Settings:

<div v-for="(img,index) in imagesList" :key="index">
  <div class="lazy-item">
      <img v-lazy="{ src: img.url, delay: 300 }" />
  </div>
</div>

Only the previous page is displayed after the delay route switchover is set. My data was obtained through an axios request.

popdo commented 1 year ago

With my settings, the loaded animation on the first screen doesn't work properly. Therefore, the display can only be delayed through delay. Is there a way to have the best of both worlds?

.lazy-item img[lazy='loaded'] {
    animation: fade 0.5s ease;
  }