Tengo algunas etiquetas <img> y algunas etiquetas <div> con 'background: url('example.jpg'); Y quiero esperar hasta que se descarguen estas imágenes y no ejecutar ningún código javascript siguiente hasta que estas imágenes se descarguen y carguen. Entonces, solo después de que pueda llamar a una función para desactivar el cargador de mi sitio web y seguir agregando los otros scripts para animar y esas cosas...
PD: No quiero esperar hasta que se carguen todas las imágenes porque eso llevará demasiado tiempo, solo quiero que se carguen algunas imágenes (como el primer fondo) antes de desactivar el cargador de mi sitio web...
Puede cargarlo en la memoria primero y luego aplicarlo al elemento
var img = new Image(); img.onload = function() { console.log('image loaded'); document.querySelector('div.bg').style.backgroundImage = `url(${img.src})` } img.src = "https://picsum.photos/200/300?" + new Date().getTime(); div.bg { height: 500px; width: 600px; background: #000; background-repeat: no-repeat; background-position: center; background-size: cover; } <div class='bg'></div>Javascript-principiante aquí, así que no sé si hay funciones existentes o algo que pueda encargarse de esto por usted.
Mis resultados de búsqueda llegaron con las manos vacías a su pregunta específica, así que esto es lo que haría si estuviera seguro de que no hay nada:
Supongo que debería ser bastante fácil crear una lista dinámica o especificar algunas imágenes específicas que desea cargar.