Tengo un menú desplegable que reemplaza la imagen según el valor seleccionado:
let selectedDiv = $('#selected_div'); let imageSource = $(this).find('img').attr('src'); selectedDiv.html("<img src='" + imageSource + "'>");Pero luego, cada vez que elijo un elemento desplegable, puedo ver en la pestaña de red que vuelve a cargar la imagen. ¿Cómo puedo descargar las imágenes necesarias del menú desplegable una vez y reutilizarlas?
Una solución sería agregar cada imagen en su div, con display:none , y hacer que una pequeña función JS se active al cambiar su menú desplegable que cambiará la display de la imagen relacionada con su valor desplegable para block y establecer los valores de visualización de las otras imágenes a none para asegurarse de no mostrar más de una imagen.
De esa manera, sus imágenes se cargarán una vez, pero estarán ocultas, excepto que seleccione el valor desplegable correcto
¿Estás seguro de que tu navegador vuelve a descargar la imagen? La imagen se mostrará en su pestaña de red incluso si está almacenada en caché en su computadora. Puede verlo en la columna "tamaño" en la pestaña de red. Probablemente dirá "caché de memoria" o "caché de disco".
Sin embargo, si no desea volver a cargar la imagen, la mejor opción sería manipular con display: none , como ya se mencionó.
Para evitar múltiples solicitudes http, use display:none y use la función js para configurar la visualización de la imagen desplegable seleccionada para block