Estoy tratando de precargar archivos de imagen con JavaScript. Los elementos <img> en sí se agregarán al DOM después de que la página ya se haya cargado, por lo que usar un <link rel="preload"> no es posible en mi caso. Probé el siguiente código, sin embargo, parece que no funciona en mi código, ya que las imágenes aún parecen cargarse después de agregar los elementos reales.
const image = new Image(); image.src = "/path/to/image.png";No puedo entender por qué esto no funciona, ya que casi todos los hilos existentes aquí tienen esta respuesta aceptada.
¿Qué pasa con el uso de window.onload para cargar todas las imágenes de las URL y almacenarlas en una matriz?
Puede encontrarlo aquí: Precarga de imágenes con JavaScript
function preloader() { if (document.getElementById) { document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px"; document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px"; document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px"; } } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(preloader);En la primera parte de esta secuencia de comandos, estamos configurando la precarga real apuntando a elementos de precarga específicos con estilos de fondo que llaman a las distintas imágenes. Por lo tanto, para usar este método, deberá reemplazar "preload-01", "preload-02", "preload-03", etc., con las ID que tendrá como objetivo en su marcado. Además, para cada una de las propiedades de fondo, deberá reemplazar "image-01.png", "image-02.png", "image-03.png", etc., con la ruta y el nombre de su imagen. archivos No se requiere ninguna otra edición para que esta técnica funcione.
Luego, en la segunda parte del script, estamos usando la función addLoadEvent() para retrasar la ejecución de nuestra función preloader() hasta que la página se haya cargado.
Fuente: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/