Зареждане на документ DOMContentLoaded, load, beforeunload, unload
Процесът на зареждане на HTML документ условно се състои от три етапа:
- DOMContentLoaded – Браузърът е заредил напълно HTML и е изградил DOM дървото.
- load - браузърът е заредил всички ресурси.
- beforeunload/unload - напускане на страницата.
Всички тези етапи са много важни. Можете да прикачите манипулатор към всеки, за да извършвате полезни действия:
- DOMContentLoaded - означава, че всички елементи на DOM маркиране вече са създадени, можете да ги търсите, да закачите манипулатори, да създадете интерфейс, но в същото време някои картини или стилове може още да не са заредени.
- зареждане - страницата и всички ресурси се зареждат, рядко се използват, обикновено няма нужда да чакате този момент.
- beforeunload / unload - можете да проверите дали посетителят е запазил промените, да изясните дали наистина иска да напусне страницата.
След това ще разгледаме важните подробности за тези събития.
DOMContentLoaded
Събитието DOMContentLoaded възниква в документа и се поддържа във всички браузъри с изключение на IE8-. Ще говорим за поддръжката на подобна функционалност в по-стария IE в края на главата.
Манипулаторът се окачва върху него само чрез addEventListener:
В примера по-горе манипулаторът DOMContentLoaded ще се задейства веднага след зареждането на документа, без да се чака изображението да бъде получено.
Следователно, по време на изхода на предупреждението, самото изображение няма да се вижда и неговите размери ще бъдат неизвестни (освен когато изображението е взето от кеша на браузъра).
В основата си събитието onDOMContentLoaded е просто като тапа. DOM дървото е напълно създадено - и ето го събитието. Но има редица съществени тънкости, свързани с него.
DOMContentLoaded и скриптове
Ако документът има тагове
Това поведение е записано в стандарта.Причината за това е, че скриптът може да иска да получи специфична за стила информация от страницата, като ширината на даден елемент, и следователно трябва да изчака style.css да се зареди.
Като страничен ефект, тъй като събитието DOMContentLoaded ще изчака изпълнението на скрипта, то ще изчака и стиловете, които идват преди
window.onunload
Когато човек напусне страницата или затвори прозореца, събитието за разтоварване се задейства на прозореца. Можете да направите нещо в него, което не изисква изчакване, например да затворите помощни изскачащи прозорци, но не можете да отмените самия преход.
Това позволява друго събитие, onbeforeunload, което следователно е много по-често използвано.
window.onbeforeunload
Ако посетителят е инициирал преход към друга страница или е щракнал върху „затваряне на прозореца“, тогава манипулаторът onbeforeunload може да постави на пауза процеса и да поиска потвърждение.
За да направи това, той трябва да върне низ. Поради исторически причини някои браузъри ще го показват, но повечето ще показват съобщението по подразбиране.
Щракнете върху бутона във IFRAME по-долу, за да поставите манипулатора, и след това щракнете върху връзката, за да го видите в действие:
Емулиране на DOMContentLoaded за IE8-
Преди да емулирате нещо, имайте предвид, че алтернатива на събитието onDOMContentLoaded е да извикате функцията init от скрипта в самия край на BODY, когато основната част на DOM е готова:
Има само една причина, поради която събитието обикновено се предпочита: удобството. Манипулаторът е закачен и няма нужда да пишете нищо в края на BODY.
мини-скрипт документ Готов
Ако все пак искате да използвате кросбраузър onDOMContentLoaded, тогава трябва или да свържете някаква рамка - почти всеки предоставя такава функционалност, или да използвате функция от мини-библиотеката jquery.documentReady.js.
ВъпрекиВъпреки факта, че името съдържа думата "jquery", тази библиотека не изисква jQuery. Напротив, това е единствената функция, наречена $, чието извикване $(callback) добавя манипулатор за обратно извикване на DOMContentLoaded (може да бъде извикан много пъти) или, ако документът вече е зареден, го изпълнява точно там.
Тук предупреждението ще се задейства преди изображението да бъде заредено, но след като DOM бъде създаден, по-специално, след като текстът се появи. И така ще бъде за всички браузъри, включително дори много стар IE.
Технически, емулирането на DOMContentLoaded за по-стари IE е много забавно.
Основната техника е опит за превъртане на документа чрез извикване:
Методът doScroll работи само в IE и е установено, че методът poke хвърля изключение, ако DOM не е напълно създаден.
Следователно библиотеката се опитва да извика превъртане, ако не успее, се опитва да го превърти отново през setTimeout (. 1) и така нататък, докато действието спре да причинява грешка. На този етап документът се счита за зареден.
Вътре в рамки и в много стари браузъри този подход може да е грешен, така че при зареждане се поставя допълнителен резервен манипулатор, за да се гарантира, че работи.
Най-търсеното събитие от описаните без съмнение е DOMContentLoaded. Много страници са направени по такъв начин, че инициализират интерфейси при това събитие.
Това е удобно, защото можете да напишете скрипт, който ще се изпълнява, когато всички DOM елементи са налични.
От друга страна, имайте предвид, че събитието DOMContentLoaded ще изчака не само действителната HTML страница, но и външни скриптове, свързани с маркера
Коментари
, ако има повече от 10 реда - връзка към пясъчника (plnkr, JSBin, codepen ...)