Чем отличаются свойства onload и onerror?

Разница между onload и onerror

Свойства onload и onerror являются обработчиками событий, которые присваиваются HTML-элементам, загружающим внешние ресурсы, таким как <img>, <script>, <link> и другие. Они позволяют реагировать на успешную загрузку или ошибку при загрузке ресурса.

Когда срабатывает onload

Событие load (обработчик onload) происходит, когда ресурс полностью загружен и готов к использованию. Например, для изображения это означает, что оно полностью скачано и может быть отображено. Для скрипта — что он выполнен.

Когда срабатывает onerror

Событие error (обработчик onerror) возникает, если при загрузке ресурса произошла ошибка. Причины могут быть разными: неверный URL, отсутствие файла на сервере, проблемы с сетью, блокировка CORS и т.д. Важно отметить, что onerror не срабатывает при синтаксических ошибках в скрипте — только при ошибках загрузки.

Пример использования

const img = new Image();
img.onload = function() {
  console.log('Изображение успешно загружено');
  document.body.appendChild(img);
};
img.onerror = function() {
  console.error('Ошибка загрузки изображения');
  // Показать запасное изображение
  img.src = 'fallback.png';
};
img.src = 'photo.jpg';

Вывод

Используйте onload для выполнения действий после успешной загрузки ресурса, а onerror — для обработки ошибок и обеспечения отказоустойчивости (например, подстановка запасного изображения). Эти обработчики особенно полезны при динамической загрузке ресурсов и в ситуациях, когда необходимо гарантировать корректное отображение контента.