Precargar imágenes con JavaScript

7 minutos de lectura

Precargar imagenes con JavaScript
francisco

¿La función que escribí a continuación es suficiente para precargar imágenes en la mayoría, si no en todos, los navegadores que se usan comúnmente en la actualidad?

function preloadImage(url)
{
    var img=new Image();
    img.src=url;
}

Tengo una matriz de URL de imágenes que recorro y llamo al preloadImage función para cada URL.

  • Tenga en cuenta que algunos (¿todos?) navegadores publicarán la imagen después de unos segundos si no la ha usado. Para evitar esto, mantenga una referencia a la img objeto, por ejemplo, en una matriz en el ámbito principal.

    – Tamlyn

    13 de octubre de 2014 a las 13:14

  • ¿Qué quieres decir con “liberar la imagen”? Si el navegador lo almacenó en caché, permanecerá allí, ¿verdad?

    – Francisco

    17/10/2014 a las 19:07

  • Un poco más corto: (new Image()).src = url;

    – e382df99a7950919789725ceeec126

    23/10/2014 a las 10:56

  • tenga en cuenta que esto no funcionará cuando chrome devtool esté abierto y ‘deshabilitar chache’ esté habilitado dentro del panel de red

    – 牛さん

    24 de enero de 2017 a las 4:11

  • Aún más corto: new Image().src = url;

    – Daniel X Moore

    5 de diciembre de 2017 a las 17:29

Precargar imagenes con JavaScript
Huzi — Javiator

Si. Esto debería funcionar en todos los principales navegadores.

  • Nota del moderador: Deje de marcar esto como “no es una respuesta”. Es, de hecho, una respuesta directa a la pregunta que se hizo. Si cree que la respuesta es incorrecta o no está suficientemente respaldada con evidencia, entonces voto negativo eso.

    – Cody gris

    20 de marzo de 2019 a las 7:29


Precargar imagenes con JavaScript
clintgh

Prueba esto, creo que esto es mejor.

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

//-- usage --//
preload(
    "http://domain.tld/gallery/image-001.jpg",
    "http://domain.tld/gallery/image-002.jpg",
    "http://domain.tld/gallery/image-003.jpg"
)

Fuente: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

  • no hay onload controlador para cualquiera de las imágenes

    – Benny Ruiseñor

    27 de julio de 2015 a las 18:22

  • ¿Podría explicar por qué esto es mejor?

    – JJJ

    29 de enero de 2016 a las 15:09

  • @BeNice Creo que está malinterpretando, la carga de imágenes es asíncrona, por lo tanto, debe manejar el onload estado o simplemente está creando instancias de imágenes en la memoria.

    – Benny Ruiseñor

    31/03/2016 a las 15:35

  • Si usa esta solución, no olvide la instrucción var para la variable i. De lo contrario, se configurará globalmente, lo que puede causar errores que son realmente difíciles de resolver (a menos que sepa que olvidó la instrucción var. for (var i = 0.....

    – Mohammer

    13 de junio de 2016 a las 23:37

  • @Mohammer gracias por esto, acabo de copiar el código del enlace que proporcioné. Editaré el código ahora para agregar el var

    – clintgh

    14 de junio de 2016 a las 2:55

1646755043 322 Precargar imagenes con JavaScript
Alejandro

En mi caso, fue útil agregar una devolución de llamada a su función para onload evento:

function preloadImage(url, callback)
{
    var img=new Image();
    img.src=url;
    img.onload = callback;
}

Y luego envuélvalo para el caso de una matriz de URL a imágenes que se precargarán con devolución de llamada en todo lo que se hace:
https://jsfiddle.net/4r0Luoy7/

function preloadImages(urls, allImagesLoadedCallback){
    var loadedCounter = 0;
  var toBeLoadedNumber = urls.length;
  urls.forEach(function(url){
    preloadImage(url, function(){
        loadedCounter++;
            console.log('Number of loaded images: ' + loadedCounter);
      if(loadedCounter == toBeLoadedNumber){
        allImagesLoadedCallback();
      }
    });
  });
  function preloadImage(url, anImageLoadedCallback){
      var img = new Image();
      img.onload = anImageLoadedCallback;
      img.src = url;
  }
}

// Let's call it:
preloadImages([
    '//upload.wikimedia.org/wikipedia/commons/d/da/Internet2.jpg',
  '//www.csee.umbc.edu/wp-content/uploads/2011/08/www.jpg'
], function(){
    console.log('All images were loaded');
});

Puede mover este código a index.html para precargar imágenes desde cualquier URL

<link rel="preload" href="https://via.placeholder.com/160" as="image">

1646755046 398 Precargar imagenes con JavaScript
mplungjan

Alternativa CSS2: http://www.thecssninja.com/css/even-better-image-preloading-with-css2

body:after {
  content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
  display: none; 
}

Alternativa CSS3: https://perishablepress.com/preload-images-css3/
(Presa H/T Linh)

.preload-images {
  display: none; 
  width: 0;
  height: 0;
  background: url(img01.jpg),
              url(img02.jpg),
              url(img03.jpg);
}

NOTA: Imágenes en un contenedor con display:none podría no precargarse. Quizás la visibilidad: oculta funcione mejor, pero no lo he probado. Gracias Marco Del Valle por señalar esto.

  • Gracias mplungjan. Aunque no me ayuda con este caso en particular, es bueno saberlo.

    – Francisco

    6 de septiembre de 2010 a las 9:36

  • ¿Tengo razón al decir que esto ralentizará la carga de la página porque estas imágenes deben descargarse antes de que la página pueda iniciar el evento de carga?

    – jakubiszon

    7 de marzo de 2015 a las 17:23

  • No creo que funcionen en todos los navegadores. Sé que en Chrome las imágenes no se cargan hasta que son visibles. Será necesario quitar la pantalla: ninguno; y en su lugar intente colocarlos de modo que no se puedan ver. Luego puede ocultarse con JS después de que todo se haya cargado si es necesario.

    – Bullyen

    29 de diciembre de 2015 a las 16:02

  • Imágenes de fondo en un elemento con display: none no se precargará.

    – Marquizzo

    17/03/2016 a las 21:44

  • Este método funcionó para mí solo que yo (1) no usé display: none(2) no usó el width/height: 0(3) poner no-repeat y una posición tal que la imagen estaría fuera (-<width>px -<height>px lo llevará allí, por lo que si sus imágenes tienen una altura de 100px o menos, puede usar 0 -100pxen otras palabras url(...) no-repeat 0 -100px.

    – Alexis Wilke

    10 de agosto de 2016 a las 0:37

const preloadImage = src => 
  new Promise(r => {
    const image = new Image()
    image.onload = r
    image.onerror = r
    image.src = src
  })


// Preload an image
await preloadImage('https://picsum.photos/100/100')

// Preload a bunch of images in parallel 
await Promise.all(images.map(x => preloadImage(x.src)))

  • Gracias mplungjan. Aunque no me ayuda con este caso en particular, es bueno saberlo.

    – Francisco

    6 de septiembre de 2010 a las 9:36

  • ¿Tengo razón al decir que esto ralentizará la carga de la página porque estas imágenes deben descargarse antes de que la página pueda iniciar el evento de carga?

    – jakubiszon

    7 de marzo de 2015 a las 17:23

  • No creo que funcionen en todos los navegadores. Sé que en Chrome las imágenes no se cargan hasta que son visibles. Será necesario quitar la pantalla: ninguno; y en su lugar intente colocarlos de modo que no se puedan ver. Luego puede ocultarse con JS después de que todo se haya cargado si es necesario.

    – Bullyen

    29 de diciembre de 2015 a las 16:02

  • Imágenes de fondo en un elemento con display: none no se precargará.

    – Marquizzo

    17/03/2016 a las 21:44

  • Este método funcionó para mí solo que yo (1) no usé display: none(2) no usó el width/height: 0(3) poner no-repeat y una posición tal que la imagen estaría fuera (-<width>px -<height>px lo llevará allí, por lo que si sus imágenes tienen una altura de 100px o menos, puede usar 0 -100pxen otras palabras url(...) no-repeat 0 -100px.

    – Alexis Wilke

    10 de agosto de 2016 a las 0:37

1646755049 442 Precargar imagenes con JavaScript
dave

Te recomiendo que uses una prueba/captura para evitar algunos posibles problemas:

OOP:

    var preloadImage = function (url) {
        try {
            var _img = new Image();
            _img.src = url;
        } catch (e) { }
    }

Estándar:

    function preloadImage (url) {
        try {
            var _img = new Image();
            _img.src = url;
        } catch (e) { }
    }

Además, aunque me encanta DOM, los viejos navegadores estúpidos pueden tener problemas con el uso de DOM, así que evítelo por completo en mi humilde opinión, contrario a la contribución de freedev. Image() tiene un mejor soporte en los antiguos navegadores de basura.

  • No creo que esta sea la forma en que detecta errores al cargar una imagen en javascript: hay algo como _img.onerror que puede (¿debería?) usarse.

    – Greg0ry

    23 de septiembre de 2015 a las 8:57

  • ¿Qué son los “posibles problemas”?

    – Kissaki

    25 de abril de 2017 a las 16:37

  • Problemas como el soporte para el comando. Visite el sitio “puedo usar” para ver si un navegador que debe admitir tiene soporte para un comando javascript.

    – Dave

    26 de enero de 2018 a las 14:44

  • @Dave, sé que es antiguo, pero agrega esta información a tu respuesta ^^

    – Toni Michel Caubet

    14 oct 2020 a las 20:08

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad