Lo he sostenido como una "verdad absoluta" durante mucho tiempo que hacer:

 let img = new Image(); img.src = '... some url ...' img.onload = function() { console.log('onload') }

fue incorrecto , porque es posible que no se llame al controlador .onload . Lo mismo para adjuntar un controlador usando .addEventListener('load', function() ... ) después de configurar .src : es posible que no funcione. (vea esta respuesta de ejemplo que dice esto: "... Agregue un detector de eventos antes de asignar un valor al atributo src ...")

Contexto para esta pregunta: encontré un ejemplo de configuración de .src antes de llamar a .addEventListener en la popular biblioteca p5.js, específicamente aquí . Me gustaría arreglar esto y enviar un PR. Sin embargo, también me gustaría crear una prueba de unidad que falle con el código actual (configurando .src = antes de llamar a .addEventListener ) y pase con mi solución.

¡Sin embargo! ¡No he podido ver en qué circunstancias falla realmente la configuración de .src antes...!

Aquí hay un código para demostrar lo que quiero decir:

 (function f() { let i = new Image(); i.src = '//placekitten.com/10/10'; document.querySelector('body').appendChild(i); let out = 0; for(let i = 0; i < 1000000000; i++) { out *= i * 100 - out * 2; } // just to delay i.onload = function() { console.log('onload') } i.addEventListener('load', function() { console.log('load event') }); })();

El ciclo de iteración 1000000000 tarda unos segundos en completarse, ya que intento que el elemento Image se agregue al DOM y que la URL de la imagen se cargue lo suficientemente pronto como para que los .onload y .addEventListener fallen... ¡Pero funcionan!

Probé con una URL de datos muy corta en lugar de placekitten.com, con el mismo resultado. Intenté cargar placekitten.com y las imágenes de URL de datos antes de ejecutar mi código de prueba (para asegurarme de que esas imágenes se almacenan en caché), pero eso tampoco funciona.

La única forma en que puedo hacer que los .onload y .addEventListener no sean llamados es envolverlos en un setTimeout ...

¿El subproceso único de JavaScript invalida la "verdad" de que .src siempre debe configurarse después de configurar los detectores de eventos? ¿O es un cambio que ocurrió en los navegadores modernos, y solía ser cierto en los navegadores más antiguos que a veces fallaba la configuración de .src antes de adjuntar los oyentes? ¡Gracias!