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
7.98k stars 865 forks source link

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

Open fawadaslam1993 opened 4 years ago

fawadaslam1993 commented 4 years ago

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 commented 4 years ago

@fawadaslam1993 Can you show some example code ?

fawadaslam1993 commented 4 years ago

<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 commented 4 years ago

` <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 commented 4 years ago

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 commented 4 years ago

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