Как понять что загрузились все ресурсы

Для определения загрузки всех ресурсов можно использовать window.onload или document.addEventListener('DOMContentLoaded'), но они не учитывают асинхронные ресурсы (изображения, скрипты и т.д.).

Более надежный вариант — window.onload, который срабатывает после полной загрузки страницы, включая все ресурсы:

window.onload = function() {
  console.log('Все ресурсы загружены');
};

Для более детального контроля можно использовать PerformanceObserver:

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntriesByType('resource');
  console.log('Загруженные ресурсы:', entries);
});
observer.observe({ type: 'resource', buffered: true });

Также можно отслеживать загрузку динамически добавленных ресурсов через load события:

const img = new Image();
img.onload = () => console.log('Изображение загружено');
img.src = 'image.jpg';