Loading image apply again on already loaded image when i scroll to next page

[fawadaslam1993]

When I scroll down on my category page product image loaded normally with the loader but I see inside the inspect element. Products on the previous page have lazy=" loading" scr="/loading image". As these are already loaded

[peng]

@fawadaslam1993 Can you show some example code ?

[fawadaslam1993]

[fawadaslam1993]

` <div class="product-image" :class="{ 'product-image--height': basic, 'product-image--width': !basic }" :style="style" v-on="$listeners" v-lazy-container="{ selector: 'img'}"

<img
  v-show="showPlaceholder"
  src="/assets/placeholder.svg"
  :alt="alt"
  class="product-image__placeholder"
>
<img
  v-if="!lowerQualityImageError || isOnline"
  v-show="showLowerQuality"
  :data-src="image.loading"
  :alt="alt"
  @load="imageLoaded('lower', true)"
  @error="imageLoaded('lower', false)"
  ref="lQ"
  class="product-image__thumb"
>
<img
  v-if="!highQualityImageError || isOnline"
  v-show="showHighQuality"
  :data-src="image.src"
  data-error="/assets/placeholder.svg"
  data-loading="/assets/loading.gif"
  :alt="alt"
  @load="imageLoaded('high', true)"
  @error="imageLoaded('high', false)"
  class="product-image__thumb"
>

`

[fawadaslam1993]

As I set the v-lazy-container="{ selector: 'img'}" on main div and set the placeholder in case of error and loading.gif in case of loading. But loading.gif call every time even I scroll from bottom to top as this is alreaded loaded

[peng]

@fawadaslam1993 Can you show an online code example, Such as use codesandbox. I can't see the problem.