Концепция загрузки HTML/JS может помочь вам контролировать поведение веб-страницы после ее загрузки.

Загрузка веб-страницы включает в себя ожидание полной загрузки содержимого страницы, изображений и других ресурсов.

Некоторые веб-страницы гарантируют, что определенные функции не будут выполняться до тех пор, пока все не завершит загрузку. Пример включает получение данных из базы данных только после загрузки страницы.

Есть разные способы проверить, полностью ли загружена веб-страница. Вы можете прослушивать события, используя обработчики событий JavaScript, используйте окно.onload событие JavaScript или в процессе атрибут HTML.

Как использовать onLoad с HTML-элементом Body

Вы можете использовать события JavaScript, чтобы проверить, загрузилось ли тело веб-страницы. Вам понадобится файл HTML с некоторым содержимым страницы и файл JavaScript для выполнения кода.

Код, используемый в этом проекте, доступен в Репозиторий GitHub и вы можете использовать его бесплатно по лицензии MIT.

  1. В новом HTML-файле с именем
    instagram viewer
    index.html, добавьте следующий базовый HTML-код:
    HTML>
    <HTML>
    <голова>
    <заголовок>Пример использования загрузкизаголовок>
    голова>
    <тело>
    <h1>Пример использования onload()h1>
    <п>В этом примере показано, как использовать событие onload() в JavaScript.п>
    тело>
    HTML>
  2. Создайте новый файл в той же папке с именем script.js. Свяжите этот файл со своей HTML-страницей с помощью тега script. Вы можете добавить тег скрипта внизу тега body:
    <тело>
     Ваш контент 
    <сценарийисточник="скрипт.js">сценарий>
    тело>
  3. Внутри содержимого тега body HTML добавьте пустой тег абзаца.
    <пидентификатор="выход">п>
  4. Внутри файла JavaScript добавьте окно.onload функция события. Это будет выполнено, когда страница загрузится:
    окно.загрузка = функция() {
    // код для запуска при загрузке страницы
    };
  5. Внутри функции заполните содержимое пустого тега абзаца. Это изменит тег абзаца, чтобы отображать сообщение только после загрузки страницы:
    документ.getElementById("выход").innerHTML = "Страница загружена!";
  6. Кроме того, вы также можете использовать прослушиватель событий слушать DOMContentLoaded событие. DOMContentLoaded срабатывает раньше, чем window.onload. Он срабатывает, как только HTML-документ готов, а не ждет загрузки всех внешних ресурсов.
    документ.addEventListener('DOMContentLoaded', функция() {
    документ.getElementById("выход").innerHTML = "Страница загружена!";
    });
  7. Откройте файл index.html в веб-браузере, чтобы просмотреть сообщение после завершения загрузки страницы:
  8. Вместо использования событий JavaScript для проверки загрузки страницы вы также можете использовать в процессе Атрибут HTML для того же результата. Добавьте атрибут onload в тег body в HTML-файле:
    <телов процессе="в этом()">
  9. Создайте в этом() внутри файла JavaScript. Не рекомендуется одновременно использовать HTML-атрибут onload и событие JavaScript onload. Это может привести к неожиданному поведению или конфликтам между двумя функциями.
    функцияв этом() {
    документ.getElementById("выход").innerHTML = "Страница загружена!";
    }

Мы рекомендуем использовать прослушиватели событий JavaScript и окно.onload метод над HTML в процессе атрибут, потому что разделение поведения и содержимого веб-страницы является хорошей практикой. Кроме того, прослушиватели событий JavaScript обеспечивают большую совместимость и гибкость по сравнению с двумя другими методами.

Как использовать onLoad с HTML-элементом изображения

Вы также можете использовать событие onload для выполнения кода при загрузке других элементов на странице. Примером этого является элемент изображения.

  1. В той же папке, что и ваш файл index.html, добавьте любое изображение.
  2. Внутри файла HTML добавьте тег изображения и свяжите атрибут src с именем изображения, сохраненного в папке.
    <изображениеидентификатор="моё изображение"источник="Пиджеймон.png"ширина="300">
  3. Добавьте еще один тег пустого абзаца, чтобы отображать сообщение при загрузке изображения:
    <пидентификатор="изображениеLoadedMessage">п>
  4. Внутри файла JavaScript добавьте событие загрузки изображения. Используйте уникальный идентификатор мое изображение чтобы определить, к какому элементу изображения добавить событие onload:
    вар мое изображение = документ.getElementById("моё изображение");
    myImage.onload = функция() {

    };
  5. Внутри события onload измените внутренний HTML, чтобы добавить Изображение загружено сообщение:
    документ.getElementById("изображениеLoadedMessage").innerHTML = "Изображение загружено!";
  6. Вместо использования myImage.onload, вы также можете использовать прослушиватель событий для прослушивания нагрузка Событие JavaScript:
    myImage.addEventListener('нагрузка', функция() {
    документ.getElementById("изображениеLoadedMessage").innerHTML = "Изображение загружено!";
    });
  7. Откройте index.html в веб-браузере, чтобы просмотреть изображение и сообщение:
  8. Для того же результата вы также можете использовать HTML-атрибут onload. Как и в теге body, добавьте атрибут onload в тег img:
    <изображениеидентификатор="моё изображение"источник="Пиджеймон.png"ширина="300"в процессе="изображение загружено()">
  9. Добавьте функцию в файл JavaScript для выполнения кода при загрузке изображения:
    функцияизображениеЗагружено() {
    документ.getElementById("изображениеLoadedMessage").innerHTML = "Изображение загружено!";
    }

Как использовать onLoad при загрузке JavaScript

Вы можете использовать атрибут HTML onload, чтобы проверить, завершил ли браузер загрузку файла JavaScript. Для тега script нет эквивалентного события загрузки JavaScript.

  1. Добавьте атрибут onload в тег script в файле HTML.
    <сценарийисточник="скрипт.js"в процессе="Загружены()">сценарий>
  2. Добавьте функцию в свой файл JavaScript. Распечатать сообщение по вход в консоль браузера:
    функциязагружены() {
    консоль.бревно("JS загружается браузером!");
    }
  3. Откройте файл index.html в браузере. Ты можешь использовать Chrome DevTools для просмотра любых сообщений, выводимых в консоль.

Загрузка веб-страниц в браузере

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

Вы можете узнать больше о том, как интегрировать более интересные дизайны страниц загрузки на свой веб-сайт.