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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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