Загрузка скриптов, картинок: события onload и onerror

Загрузка скриптов, картинок: события onload и onerror

Здравствуйте! В этом уроке я хотел бы рассказать о таких вещах как  загрузка картинок и скриптов и подробнее остановиться на событиях onload и onerror.  Браузер позволяет вам отслеживать  загрузку внешних скриптов и картинок и для этого вы можете использовать такие события.

• onload — если загрузка прошла успешно
• onerror — если произошла ошибка

Загрузка SCRIPT

Разберем такой пример.

Допустим вам понадобилось  загрузить скрипт с сервера.

Подгрузить  его  достаточно просто:

var script = document.createElement('script');
script.src = "my.js";
document.body.appendChild(script);

Но как после подгрузки выполнить функцию,  из этого скрипта ? Для этого потребуется  отловить момент окончания загрузки и выполнения тега <script>.

script.onload

Главным помощником вам станет событие onload. Оно сработает, когда скрипт загрузился и выполнился.

Вот пример:

var script = document.createElement('script');
script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"
document.body.appendChild(script);
script.onload = function() {
    // после выполнения скрипта становится доступна функция _
    alert( _ ); // её код
  }

Это даёт возможность, получить переменные из скрипта и выполнять объявленные в нём функции.
А  в случае если  загрузка скрипта не удалась? Например, такого скрипта на сервере нет (ошибка 404) или сервер «упал» (ошибка 500).
Такую ситуацию тоже нужно как-то обрабатывать, хотя бы сообщить посетителю о возникшей проблеме. На это есть событие onerror.

script.onerror

Любые ошибки загрузки (но не выполнения) скрипта отслеживаются  с помощью события  onerror.

Например,  давайте сделаем запрос заведомо отсутствующего скрипта:

var script = document.createElement('script');
script.src = "https://example.com/404.js"
document.body.appendChild(script);
script.onerror = function() {
  alert( "Ошибка: " + this.src );
};

Загрузка других ресурсов

Поддержка этих событий для других типов ресурсов различна:

<img>, <link> (стили)

Поддерживает onload/onerror во всех браузерах.

Итого

В этой статье мы с вами  рассмотрели события onload/onerror для  внешних ресурсов.

Их можно обобщить, разделив на рецепты:

Перехватить загрузку скрипта (включая ошибку)

Ставим обработчики на onload + onerror , как показано в рецепте выше

Отловить загрузку картинки <img> или стиля <link>

Ставим обработчики на onload + onerror

var img = document.createElement('img');
img.onload = function() { alert("Успех " + this.src) };
img.onerror = function() { alert("Ошибка " + this.src) };
img.src = ...

Изображения начинают загружаться сразу при создании, не нужно их для этого вставлять в HTML.

preloadImages(["1.jpg", "2.jpg", "3.jpg"], callback);

Если вдруг возникает ошибка при загрузке – считаем такое изображение загруженным.

Такая функция может быть полезна, например, для фоновой загрузки картинок в онлайн-галерею.

В исходном документе содержатся ссылки на картинки, а также код для проверки, действительно ли изображения загрузились. Он должен выводить «0», затем «300».