For a shopping cart application with VueJS, I have a list of products paginated. All the products are fetched when the user opens the page and then I use a page variable to know which products to show. When I go from page 1 to page 2, the products are replaced by new ones but images take time to change. On my computer it takes like 1 second and on my phone 2 seconds. Some users tell me it's even longer. The problem is that while it's loading, it shows an image of another product from the previous page. So for some seconds on a new page, there are products with names and images not corresponding to them. Do you have any idea why this is happening ? If it takes time to load the new image, I prefer having nothing the time it loads instead of having an image of the previous page.
I have the same problem with the vutify v-autocomplete where each item has an image.
Overview of my pagination implementation (I don't think it's the problem because v-autocompetes has the same isssue):
<div
v-for="(product, i) in productsByIDPaginated"
:key="i"
>
<img
v-if="product.imagesNumber > 0"
@click.stop="toProductDetailsPage(product)"
:src="imageUrl(product)"
@error="replaceByDefault"
/>
<img
v-else
@click="toProductDetailsPage(product)"
src="../assets/unknown2.jpg"
/>
</div>
<script>
productsByIDPaginated() {
return this.productsByIDFiltred.slice(
this.numberProdsByPage * (this.page - 1),
this.numberProdsByPage * this.page
);
},
</script>
It would be helpful to see how the products and pagination are implemented.
I would assume that the old image does not change until after the new products are fetched. My best guess to solve this, assuming you are looping over the products, would be to make sure the keys are changed the moment new products are requested.
The reason of such behaviours (showing the old images on the next page (while pagination) until the new ones are loaded) is missing of :key="" prop, or passing to this prop the index of v-for (as you do).
You should:
:key="item.id"), or:key="index + pageNum * itemsCountPerPage", orkey prop.So, for example, for the second case if you list 10 items per a page: on the first page items will have ID (key prop) from 0 to 9, on the next one — from 10 to 19.