0
172
VistasPrecargue imágenes y evite descargar la misma imagen varias veces en JavaScript
Estoy creando una aplicación Angular que incluye una galería de imágenes. Básicamente una imagen y dos botones, imagen anterior e imagen siguiente. A continuación se muestra un código mínimo para dicha galería (sin Angular):
<html> <style> img { display: block; height: 300px; } </style> <body> <img id="img"></img> <button id="prevB">Prev</button> <button id="nextB">Next</button> <script> var arr = [ "https://firebasestorage.googleapis.com/v0/b/animaps-e8f7a.appspot.com/o/EugywRZ814yCMrMhopVF%2F3c.jfif?alt=media&token=d6ab88bc-5065-4dbc-ab9d-884a9af1380b", "https://firebasestorage.googleapis.com/v0/b/animaps-e8f7a.appspot.com/o/4KzYH8gMDjhKHFrTIXlB%2F1c.jpg?alt=media&token=9cd7bed2-c645-408c-acd5-77fdd9370389", "https://firebasestorage.googleapis.com/v0/b/animaps-e8f7a.appspot.com/o/ftGGK4Wj1ski8lJi1TRE%2F5a.jfif?alt=media&token=4a36d9c5-924f-4738-9851-cf057de74544", ] var index = 0; document.getElementById("prevB").addEventListener("click", () => { index--; document.getElementById("img").src = arr[index % arr.length]; }); document.getElementById("nextB").addEventListener("click", () => { index++; document.getElementById("img").src = arr[index % arr.length]; }); document.getElementById("img").src = arr[index]; </script> </body> Pregunta 1: ¿Por qué el navegador descarga la misma imagen varias veces? Cada vez que hago clic en Anterior o Siguiente, la imagen se vuelve a descargar, incluso si ya se había descargado. ¿Hay alguna manera de indicarle al navegador que almacene en caché (guarde) las imágenes descargadas? 
Pregunta 2: ¿Hay alguna forma (específica de Angular o JS puro) de precargar la lista completa de imágenes? Es decir, descargue todas las imágenes cuando se carga la página y luego vea instantáneamente la siguiente imagen al hacer clic en Siguiente.
1 Respuestas
Responde la pregunta0
Pregunta 1: ¿Por qué el navegador descarga la misma imagen varias veces?
Lo más probable es que tenga la consola abierta y haya seleccionado desactivar caché. O eso o el backend está configurando algún tipo de encabezado de control de caché
Pregunta 2: ¿Hay alguna forma (específica de Angular o JS puro) de precargar la lista completa de imágenes?
Claro, probablemente crearía los elementos img en JS, y luego simplemente intercambiaría sus imágenes creadas previamente (en lugar de simplemente alternar el src en la misma imagen), así que algo como:
const createImg = (src) => { const img = document.createElement('img'); img.src = src; img.id="img"; return img; } var arr = [ "https://firebasestorage.googleapis.com/v0/b/animaps-e8f7a.appspot.com/o/EugywRZ814yCMrMhopVF%2F3c.jfif?alt=media&token=d6ab88bc-5065-4dbc-ab9d-884a9af1380b", "https://firebasestorage.googleapis.com/v0/b/animaps-e8f7a.appspot.com/o/4KzYH8gMDjhKHFrTIXlB%2F1c.jpg?alt=media&token=9cd7bed2-c645-408c-acd5-77fdd9370389", "https://firebasestorage.googleapis.com/v0/b/animaps-e8f7a.appspot.com/o/ftGGK4Wj1ski8lJi1TRE%2F5a.jfif?alt=media&token=4a36d9c5-924f-4738-9851-cf057de74544", ].map(createImg); var index = 0; document.getElementById("prevB").addEventListener("click", () => { index--; const img = document.getElementById("img"); img.parentNode.replaceChild( arr[index % arr.length], img); }); document.getElementById("nextB").addEventListener("click", () => { index++; const img = document.getElementById("img"); img.parentNode.replaceChild( arr[index % arr.length], img); }); img.parentNode.replaceChild( arr[index % arr.length], img); #img { width: 400px; } <img id="img"></img> <button id="prevB">Prev</button> <button id="nextB">Next</button>