Para una aplicación de carrito de compras con VueJS, tengo una lista de productos paginada. Todos los productos se obtienen cuando el usuario abre la página y luego uso una variable de página para saber qué productos mostrar. Cuando paso de la página 1 a la página 2, los productos se reemplazan por otros nuevos, pero las imágenes tardan en cambiar. En mi computadora toma como 1 segundo y en mi teléfono 2 segundos. Algunos usuarios me dicen que es incluso más largo. El problema es que mientras carga muestra una imagen de otro producto de la página anterior. Entonces, durante unos segundos en una nueva página, hay productos con nombres e imágenes que no se corresponden con ellos. ¿Tienes alguna idea de por qué sucede esto? Si tarda en cargar la nueva imagen, prefiero no tener nada el tiempo que carga en lugar de tener una imagen de la página anterior.

Tengo el mismo problema con vutify v-autocompletar donde cada elemento tiene una imagen.

Descripción general de mi implementación de paginación (no creo que sea el problema porque v-autocompetes tiene el mismo problema):

 <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>