Según esta pregunta extremadamente popular , precargar imágenes con javascript es tan fácil como:
function preloadImage(url) { var img=new Image(); img.src=url; }Pero lo que me gustaría saber es cómo puedes saber cuándo está hecho. Podría simplemente hacer un pequeño setTimeout y asumir que se hará después de un pequeño retraso, pero con velocidades de conexión variables y especialmente para imágenes grandes o grandes cantidades de imágenes, esto no es confiable.
¿Hay alguna forma de saber con certeza cuándo se realiza la carga?
Los elementos de imagen tienen dos eventos a los que te puedes suscribir para saber que la imagen se ha cargado: onload y onerror :
function preloadImage(url, doneCallback) { var img=new Image(); img.src=url; img.onload = () => { doneCallback(); } img.onerror = () => { doneCallback(new Error('Failed to load image ' + url)); } } preloadImage(url, (err) => { if (err) { console.log(err.message); } else { console.log('Preloading DONE!'); // do what you want after preloading here! } }O si prefiere Promises (para que pueda usar async/await, etc.):
function preloadImage(url) { var img=new Image(); img.src=url; return new Promise((done, fail) => { img.onload = () => { done(); } img.onerror = () => { fail(new Error('Failed to load image ' + url)); } }); } async function main () { console.log('preloading image!'); await preloadImage(url); console.log('done preloading image!'); } main().catch((err) => { console.log(err.message); });Acabo de encontrar la respuesta a mi propia pregunta en los documentos de MDN para la clase Imagen. Hay un atributo booleano complete que te dice si está hecho.