Главная страница  /  Занятия  /  #7  /  Работа с событиями при загрузке ресурсов в JavaScript

Работа с событиями при загрузке ресурсов в JavaScript

Задание:

Показать, какие события возникают при загрузке ресурсов и как работать с ними в JavaScript.

HTML–код (index.html):

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Работа с событиями при загрузке страницы в JavaScript</title>
     <script src="script-1.js"></script>
    </head>
   
    <body>
     <p><b>События при загрузке ресурсов.</b></p>
    </body>
   
   </html>

JS–скрипты:

Файл script-1.js:

   window.onload = function()
   {
    let script2 = document.createElement('script');
    script2.src = "script-2.js"
    document.head.append(script2);
    let script3 = document.createElement('script');
    script3.src = "script-3.js"
    document.head.append(script3);
   
    script2.onload = function()
    {
     alert('Второй скрипт загружен.');
    };
   
    script3.onerror = function()
    {
     alert('Ошибка загрузки третьего скрипта!');
    };
   
    let myImg = document.createElement('img');
    myImg.src = "https://egorchernorukov.ru/img/desktop/upload/services/objects/object-92.jpg";
   
    myImg.onload = function()
    {
     alert('Изображение загружено');
     document.body.append(myImg);
    };
   
    myImg.onerror = function()
    {
     alert("Ошибка во время загрузки изображения");
    };
   };

Файл script-2.js:

   alert('Это второй скрипт!');

Результат:

Результат выполнения задания можно посмотреть здесь.