Концепт учитавања ХТМЛ/ЈС може вам помоћи да контролишете понашање веб странице након што се учита.
Учитавање веб странице укључује чекање да се садржај странице, слике и други ресурси потпуно учитају.
Неке веб странице осигуравају да се одређене функције неће појавити док се све не учитава. Пример укључује преузимање података из базе података тек након што се страница учита.
Постоје различити начини на које можете да проверите да ли је веб страница потпуно учитана. Можете да слушате догађаје користећи ЈаваСцрипт обрађиваче догађаја, користите виндов.онлоад ЈаваСцрипт догађај, или на оптерећење ХТМЛ атрибут.
Како користити онЛоад са ХТМЛ елементом Боди
Можете да користите ЈаваСцрипт догађаје да проверите да ли се тело веб странице учитало. Биће вам потребна ХТМЛ датотека са неким садржајем странице и ЈаваСцрипт датотека да бисте извршили код.
Код који се користи у овом пројекту доступан је у а ГитХуб спремиште и бесплатан је за коришћење под МИТ лиценцом.
- У новој ХТМЛ датотеци под називом индек.хтмл, додајте следећи основни ХТМЛ код:
хтмл>
<хтмл>
<глава>
<наслов>Пример коришћења онлоаднаслов>
глава>
<тело>
<х1>Пример коришћења онлоад()х1>
<стр>Овај пример показује како се користи догађај онлоад() у ЈаваСцрипт-у.стр>
тело>
хтмл> - Креирајте нову датотеку у истој фасцикли под називом сцрипт.јс. Повежите ову датотеку са својом ХТМЛ страницом помоћу ознаке скрипте. Можете додати ознаку скрипте на дну ознаке тела:
<тело>
Ваш садржај
<скриптасрц="сцрипт.јс">скрипта>
тело> - Унутар садржаја у ХТМЛ ознаци тела додајте празну ознаку пасуса.
<стрид="излаз">стр> - Унутар ЈаваСцрипт датотеке додајте виндов.онлоад функција догађаја. Ово ће се извршити када се страница учита:
прозор.онлоад = функција() {
// код за покретање када се страница учита
}; - Унутар функције попуните садржај ознаке празног пасуса. Ово ће променити ознаку пасуса тако да приказује поруку само када се страница учита:
документ.гетЕлементБиИд("излаз").иннерХТМЛ = „Страница је учитана!“; - Алтернативно, такође можете користите слушалац догађаја да слушам за ДОМЦонтентЛоадед догађај. ДОМЦонтентЛоадед покреће раније од виндов.онлоад. Покреће се чим је ХТМЛ документ спреман, уместо да чека да се сви спољни ресурси учитају.
документ.аддЕвентЛистенер('ДОМЦонтентЛоадед', функција() {
документ.гетЕлементБиИд("излаз").иннерХТМЛ = „Страница је учитана!“;
}); - Отворите датотеку индек.хтмл у веб претраживачу да бисте видели поруку када се страница заврши учитавањем:
- Уместо да користите ЈаваСцрипт догађаје да проверите да ли се страница учитала, такође можете да користите на оптерећење ХТМЛ атрибут за исти резултат. Додајте атрибут онлоад у ознаку тела у вашој ХТМЛ датотеци:
<телона оптерећење="у томе()"> - Цреате тхе у томе() функција унутар ЈаваСцрипт датотеке. Не препоручује се истовремено коришћење и онлоад ХТМЛ атрибута и онлоад ЈаваСцрипт догађаја. То би могло довести до неочекиваног понашања или сукоба између ове две функције.
функцијау томе() {
документ.гетЕлементБиИд("излаз").иннерХТМЛ = „Страница је учитана!“;
}
Препоручујемо коришћење ЈаваСцрипт слушалаца догађаја и виндов.онлоад метод преко ХТМЛ-а на оптерећење атрибута јер је држање одвојеног понашања и садржаја веб странице добра пракса. Такође, ЈаваСцрипт слушаоци догађаја пружају већу компатибилност и флексибилност у односу на друга два метода.
Како користити онЛоад са ХТМЛ елементом слике
Такође можете да користите догађај онлоад за извршавање кода када се други елементи учитају на страници. Пример за то је елемент слике.
- Унутар истог фолдера као и ваша индек.хтмл датотека, додајте било коју слику.
- Унутар ХТМЛ датотеке додајте ознаку слике и повежите атрибут срц са именом слике сачуване у фасцикли.
<имгид="моја слика"срц="Пидгеимон.пнг"ширина="300"> - Додајте још једну празну ознаку пасуса да бисте приказали поруку када се слика учита:
<стрид="имагеЛоадедМессаге">стр> - Унутар ЈаваСцрипт датотеке додајте догађај онлоад на слику. Користите јединствени ИД миИмаге да одредите у који елемент слике да додате догађај онлоад:
вар миИмаге = документ.гетЕлементБиИд("моја слика");
миИмаге.онлоад = функција() {
}; - Унутар догађаја онлоад, промените унутрашњи ХТМЛ да бисте додали Слика је учитана порука:
документ.гетЕлементБиИд("имагеЛоадедМессаге").иннерХТМЛ = „Слика је учитана!“; - Уместо коришћења миИмаге.онлоад, можете користити и слушалац догађаја да бисте слушали оптерећење ЈаваСцрипт догађај:
миИмаге.аддЕвентЛистенер('учитавање', функција() {
документ.гетЕлементБиИд("имагеЛоадедМессаге").иннерХТМЛ = „Слика је учитана!“;
}); - Отворите индек.хтмл у веб претраживачу да видите слику и поруку:
- За исти резултат можете користити и ХТМЛ атрибут онлоад. Слично ознаци боди, додајте атрибут онлоад у ознаку имг:
<имгид="моја слика"срц="Пидгеимон.пнг"ширина="300"на оптерећење="имагеЛоадед()"> - Додајте функцију у ЈаваСцрипт датотеку, да извршите код када се слика учита:
функцијаимагеЛоадед() {
документ.гетЕлементБиИд("имагеЛоадедМессаге").иннерХТМЛ = „Слика је учитана!“;
}
Како користити онЛоад приликом учитавања ЈаваСцрипт-а
Можете да користите ХТМЛ онлоад атрибут да проверите да ли је прегледач завршио са учитавањем ЈаваСцрипт датотеке. Не постоји еквивалентан догађај учитавања ЈаваСцрипт-а за ознаку скрипте.
- Додајте атрибут онлоад у ознаку скрипте у вашој ХТМЛ датотеци.
<скриптасрц="сцрипт.јс"на оптерећење="ЛоадедЈс()">скрипта> - Додајте функцију у своју ЈаваСцрипт датотеку. Одштампајте поруку од пријављивање на конзолу претраживача:
функцијаЛоадедЈс() {
конзола.Пријава(„ЈС учитао претраживач!“);
} - Отворите датотеку индек.хтмл у претраживачу. Можете користите Цхроме ДевТоолс да видите све поруке које излазе у конзолу.
Учитавање веб страница у претраживач
Сада можете да користите функције и догађаје да извршите одређени код када се веб страница заврши учитавањем. Учитавање страница је велики фактор у стварању глатког и беспрекорног корисничког искуства.
Можете сазнати више о томе како можете да интегришете занимљивије дизајне страница за учитавање у своју веб локацију.
