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

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

Някои уеб страници гарантират, че определени функции няма да се появят, докато всичко не приключи зареждането. Един пример включва извличане на данни от база данни само след зареждане на страницата.

Има различни начини, по които можете да проверите дали дадена уеб страница е напълно заредена. Можете да слушате събития с помощта на JavaScript манипулатори на събития, използвайте window.onload JavaScript събитие или зареждане HTML атрибут.

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

Можете да използвате събития в JavaScript, за да проверите дали тялото на уеб страницата се е заредило. Ще ви е необходим HTML файл с малко съдържание на страницата и JavaScript файл, за да изпълните кода.

Кодът, използван в този проект, е наличен в a GitHub хранилище и е безплатен за използване под лиценза на MIT.

instagram viewer
  1. В нов HTML файл, наречен index.html, добавете следния основен HTML код:
    html>
    <html>
    <глава>
    <заглавие>Пример за използване на onloadзаглавие>
    глава>
    <тяло>
    <h1>Пример за използване на onload()h1>
    <стр>Този пример демонстрира как да използвате събитието onload() в JavaScript.стр>
    тяло>
    html>
  2. Създайте нов файл в същата папка, наречена script.js. Свържете този файл към вашата HTML страница, като използвате маркера скрипт. Можете да добавите тага на скрипта в долната част на тага body:
    <тяло>
     Вашето съдържание 
    <сценарийsrc="script.js">сценарий>
    тяло>
  3. Във вътрешността на съдържанието във вашия HTML таг за тяло добавете празен таг за абзац.
    <стрдокумент за самоличност="изход">стр>
  4. Вътре в JavaScript файла добавете window.onload събитие функция. Това ще се изпълни, когато страницата се зареди:
    прозорец.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 файла. Не се препоръчва едновременното използване на атрибута onload HTML и onload JavaScript събитието. Това може да доведе до неочаквано поведение или конфликти между двете функции.
    функцияв него() {
    документ.getElementById("изход").innerHTML = „Страницата е заредена!“;
    }

Препоръчваме да използвате слушателите на събития на JavaScript и window.onload метод над HTML зареждане тъй като разделянето на поведението и съдържанието на уеб страницата е добра практика. Освен това слушателите на събития на JavaScript осигуряват повече съвместимост и гъвкавост спрямо другите два метода.

Как да използвате onLoad с HTML елемента Image

Можете също да използвате събитието onload, за да изпълните код, когато други елементи се заредят на страницата. Пример за това е елементът изображение.

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

    };
  5. В събитието onload променете вътрешния HTML, за да добавите Изображението е заредено съобщение:
    документ.getElementById("imageLoadedMessage").innerHTML = „Изображението е заредено!“;
  6. Вместо да използвате myImage.onload, можете също да използвате слушател на събития, за да слушате натоварване JavaScript събитие:
    myImage.addEventListener("зареждане", функция() {
    документ.getElementById("imageLoadedMessage").innerHTML = „Изображението е заредено!“;
    });
  7. Отворете index.html в уеб браузър, за да видите изображението и съобщението:
  8. За същия резултат можете също да използвате HTML атрибута onload. Подобно на етикета body, добавете атрибут onload към етикета img:
    <imgдокумент за самоличност="myImage"src="Pidgeymon.png"ширина="300"зареждане="imageLoaded()">
  9. Добавете функцията в JavaScript файла, за да изпълните кода, когато изображението се зареди:
    функцияimageLoaded() {
    документ.getElementById("imageLoadedMessage").innerHTML = „Изображението е заредено!“;
    }

Как да използвате onLoad при зареждане на JavaScript

Можете да използвате атрибута HTML onload, за да проверите дали браузърът е приключил със зареждането на JavaScript файла. Няма еквивалентно събитие за зареждане на JavaScript за маркера на скрипта.

  1. Добавете атрибута onload към тага на скрипта във вашия HTML файл.
    <сценарийsrc="script.js"зареждане="LoadedJs()">сценарий>
  2. Добавете функцията към вашия JavaScript файл. Отпечатайте съобщение от влизане в конзолата на браузъра:
    функцияLoadedJs() {
    конзола.log(„JS, зареден от браузъра!“);
    }
  3. Отворете файла index.html в браузъра. Можеш използвайте Chrome DevTools за да видите всички съобщения, изведени в конзолата.

Зареждане на уеб страници в браузъра

Вече можете да използвате функции и събития, за да изпълните определен код, когато дадена уеб страница приключи зареждането. Зареждането на страници е голям фактор за създаването на гладко и безпроблемно потребителско изживяване.

Можете да научите повече за това как можете да интегрирате по-интересни дизайни на страници за зареждане във вашия уебсайт.