Здравствуйте! В этом уроке я хотел бы рассказать о таких вещах как загрузка картинок и скриптов и подробнее остановиться на событиях onload и onerror. Браузер позволяет вам отслеживать загрузку внешних скриптов и картинок и для этого вы можете использовать такие события.
Разберем такой пример.
Допустим вам понадобилось загрузить скрипт с сервера.
Подгрузить его достаточно просто:
var script = document.createElement('script'); script.src = "my.js"; document.body.appendChild(script);
Но как после подгрузки выполнить функцию, из этого скрипта ? Для этого потребуется отловить момент окончания загрузки и выполнения тега <script>.
Главным помощником вам станет событие 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.
Любые ошибки загрузки (но не выполнения) скрипта отслеживаются с помощью события onerror.
Например, давайте сделаем запрос заведомо отсутствующего скрипта:
var script = document.createElement('script'); script.src = "https://example.com/404.js" document.body.appendChild(script); script.onerror = function() { alert( "Ошибка: " + this.src ); };
Поддержка этих событий для других типов ресурсов различна:
В этой статье мы с вами рассмотрели события onload/onerror для внешних ресурсов.
Их можно обобщить, разделив на рецепты:
var img = document.createElement('img'); img.onload = function() { alert("Успех " + this.src) }; img.onerror = function() { alert("Ошибка " + this.src) }; img.src = ...
Вам надо реализовать «красивый» (HTML) аналог alt при помощи CSS/JavaScript, который затем будет заменён картинкой сразу же как только она загрузится. А если загрузка не состоится – то не заменён.
Создайте функцию preloadImages(src, callback), которая предзагружает изображения из массива sources, и после загрузки вызывает функцию callback.
Пример использования:
preloadImages(["1.jpg", "2.jpg", "3.jpg"], callback);
Если вдруг возникает ошибка при загрузке – считаем такое изображение загруженным.
Такая функция может быть полезна, например, для фоновой загрузки картинок в онлайн-галерею.
В исходном документе содержатся ссылки на картинки, а также код для проверки, действительно ли изображения загрузились. Он должен выводить «0», затем «300».
Об авторе