1

Necesito hacer una precarga de una lista de imágenes en javascript para luego ser utilizadas en el DOM. He encontrado el siguiente snippet de código en la web y he decidido probarlo:

var images = [];
function preload() {
    for (var i = 0; i < arguments.length; i++) {
        images[i] = new Image();
        images[i].src = preload.arguments[i];
    }
}

preload(
    "assets/images/image1.jpg",
    "assets/images/image1.jpg",
    "assets/images/image1.jpg"
)

El caso es que por lo que veo se guardan en el array images[] como una especie de objetos. ¿Cómo puedo imprimir estas imágenes luego en el DOM? De momento tengo lo típico:

var ejemplodecontenedor = document.getElementById("divejemplo");
ejemplodecontenedor.innerHTML = "<img src='assets/images/image1.png'/>";

He probado ahora reemplazando en la última línea:

ejemplodecontenedor.innerHTML = images[0];

Esto evidentemente como ya me suponía no funciona. ¿Cuál es la forma de llamarlas correctamente?

2 respuestas 2

1

Una vez que haz cargado las imágenes estas permanecen en el cache y podrás usarla. Por ejemplo, para modificar una imagen en el DOM puedes usar: document.getElementById("images").src = images.src, ejemplo:

var images = [];
function preload() {
    for (var i = 0; i < arguments.length; i++) {
        images[i] = new Image();
        images[i].src = preload.arguments[i];
    }
}

preload(
 "https://lh5.googleusercontent.com/-D1NXbKDvO6k/AAAAAAAAAAI/AAAAAAAAABk/0H7BjgAeh48/photo.jpg?sz=48",

"https://lh5.googleusercontent.com/-D1NXbKDvO6k/AAAAAAAAAAI/AAAAAAAAABk/0H7BjgAeh48/photo.jpg?sz=48",

"https://lh5.googleusercontent.com/-D1NXbKDvO6k/AAAAAAAAAAI/AAAAAAAAABk/0H7BjgAeh48/photo.jpg?sz=48"
)

for(n in images) {
 document.getElementById("img"+n).src = images[n].src;
}
<img id="img0">
<img id="img1">
<img id="img2">

1
  • Esto me sirve, y muchas gracias por el fiddle para verlo mejor! :)
    – nice_guy
    el 5 may. 2017 a las 11:16
0

Teniendo tu array images[], Debes recorrerlo y hacer esto :

document.getElementById('miImagen').src = images[j].src;

Quedando el código algo así:

var images = [];
function preload() {
    for (var i = 0; i < arguments.length; i++) {
        images[i] = new Image();
        images[i].src = preload.arguments[i];
    }

    // Mostramos las imagenes
    for (var j = 0; j < images.length; j++) {
        document.getElementById('miImagen').src = images[j].src;      
    }
}

preload(
    "https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66"
)
<img src="imagen.jpg" id="miImagen" />

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.