Так как я изучал атрибуты asyn c и defer тега script, я пытался точно понять, когда эти сценарии выполняются относительно того, когда событие DOMContentLoaded и событие window.onload уволена. Насколько я понимаю, и, согласно MDN, внешний сценарий с установленным атрибутом defer будет запускаться после загрузки содержимого DOM и непосредственно перед срабатыванием события DOMContentLoaded, тогда как window.onload запускается только после того, как все ресурсы были загружены. загружен, включая изображения. Что не указано, так это то, что теги img на веб-сайте уже начали загружаться в момент запуска DOMContentLoaded.
После тестирования мне кажется, что событие img.onload вызывается после DOMContentLoaded, но перед окном. в процессе. То, что я хотел выяснить, было ли загрузка изображения до того, как DOMContentLoaded запустился или после. Пытаясь подключить прослушиватель события loadstart к моему внешнему отложенному сценарию, я обнаружил, что могу получить доступ к элементу img в JavaScript до запуска DOMContentLoaded, но событие не перехватывается, поскольку, очевидно, изображение уже загрузка началась с того момента, когда я присоединяю слушателя loadstart. Я обнаружил, что если я добавлю атрибут 'onloadstart' непосредственно к тегу HTML, то смогу обнаружить loadstart, но, похоже, нет способа сделать это динамически. Я мог бы счесть полезным сделать это, например, если бы я хотел динамически вычислить, сколько времени занимает загрузка ресурса, хотя это не было моей первоначальной целью. Итак, я думаю, что мой настоящий вопрос на самом деле:
Есть ли способ динамически добавить прослушиватель события loadstart к тегу изображения или другому тегу, который требует времени для загрузки и фактически его перехватывает, или определить, когда узел добавлен в документ до события DOMContentLoaded и добавить прослушиватель в этот момент?