Wykonuję zewnętrzny skrypt, używając <script>wewnętrznego <head>.
Ponieważ skrypt wykonuje się przed załadowaniem strony <body>, między innymi nie mam dostępu do . Chciałbym wykonać JavaScript po „załadowaniu” dokumentu (HTML w pełni pobrany i wbudowany w RAM). Czy są jakieś zdarzenia, do których mogę się przyczepić podczas wykonywania skryptu, które zostaną wywołane podczas ładowania strony?
Odpowiedzi:
Te rozwiązania będą działać:
<body onload="script();">lub
document.onload = function ...lub nawet
window.onload = function ...Pamiętaj, że ostatnia opcja jest lepszym rozwiązaniem, ponieważ jest dyskretna i jest uważana za bardziej standardową .
document.onload=nie jest narzucający się en.wikipedia.org/wiki/Unobtrusive_JavaScript
Racjonalnie przenośny, niestrukturyzowany sposób ustawiania skryptu do uruchamiania w czasie ładowania:
if(window.attachEvent) {
window.attachEvent('onload', yourFunctionName);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function(evt) {
curronload(evt);
yourFunctionName(evt);
};
window.onload = newonload;
} else {
window.onload = yourFunctionName;
}
}To zdarzenie jest uruchamiane, gdy początkowy dokument HTML został całkowicie załadowany i przeanalizowany , bez oczekiwania na zakończenie ładowania arkuszy stylów, obrazów i podramek. Na tym etapie można programowo zoptymalizować ładowanie obrazów i css w zależności od urządzenia użytkownika lub szybkości łącza.
Wykonuje się po załadowaniu DOM (przed img i css):
document.addEventListener("DOMContentLoaded", function(){
//....
});Uwaga: Synchroniczny JavaScript wstrzymuje analizowanie DOM. Jeśli chcesz, aby DOM był analizowany tak szybko, jak to możliwe, po tym, jak użytkownik zażądał strony, możesz włączyć asynchroniczny JavaScript i zoptymalizować ładowanie arkuszy stylów
Zupełnie inne zdarzenie, ładowanie , powinno być używane tylko do wykrywania w pełni załadowanej strony . Bardzo popularnym błędem jest użycie obciążenia, w którym DOMContentLoaded byłby znacznie bardziej odpowiedni, więc bądź ostrożny.
Występuje po załadowaniu i przeanalizowaniu wszystkiego:
window.addEventListener("load", function(){
// ....
});Zasoby MDN:
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load
Lista MDN wszystkich zdarzeń:
window.onload = ...myśleć, że mój skrypt zaczeka, aż wszystko zostanie w pełni pobrane przed uruchomieniem, ale wygląda na to, że window.onloadtak się zachowuje document.addEventListener("DOMContentLoaded", ..., podczas gdy window.addEventListener("load", ...naprawdę naprawdę czeka, aż wszystko zostanie w całości pobrane. Myślałem, że to window.onloadpowinno być równoważne window.addEventListener("load", ...zamiast document.addEventListener("DOMContentLoaded", ...?? Ten sam wynik uzyskałem w Chrome i FF.
Możesz umieścić atrybut „onload” wewnątrz ciała
...<body onload="myFunction()">...Lub jeśli używasz jQuery, możesz to zrobić
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })Mam nadzieję, że odpowie na twoje pytanie.
Zauważ, że $ (okno) .load zostanie wykonane po wyrenderowaniu dokumentu na twojej stronie.
Jeśli skrypty są ładowane w obrębie <head>dokumentu, możliwe jest użycie deferatrybutu w znaczniku script.
Przykład:
<script src="demo_defer.js" defer></script>Od https://developer.mozilla.org :
odraczać
Ten atrybut logiczny jest ustawiony tak, aby wskazywał przeglądarce, że skrypt ma zostać wykonany po przeanalizowaniu dokumentu, ale przed uruchomieniem DOMContentLoaded.
Tego atrybutu nie można używać, jeśli atrybut src jest nieobecny (tj. W przypadku skryptów wbudowanych), w tym przypadku nie miałby żadnego efektu.
Aby osiągnąć podobny efekt dla dynamicznie wstawianych skryptów, użyj async = false. Skrypty z atrybutem odroczenia będą wykonywane w kolejności, w jakiej występują w dokumencie.
Oto skrypt oparty na odroczonym ładowaniu pliku js po załadowaniu strony,
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>Gdzie to umiejscowić?
Wklej kod do kodu HTML tuż przed
</body>tagiem (w dolnej części pliku HTML).
Co to robi?
Ten kod mówi: poczekaj na załadowanie całego dokumentu, a następnie załaduj plik zewnętrzny
deferredfunctions.js.
Oto przykład powyższego kodu - Odroczenie renderowania JS
Napisałem to w oparciu o odroczone ładowanie strony javascript pagepeed google, a także zaczerpnąłem z tego artykułu Odrocz ładowanie javascript
Spójrz na zaczepianie document.onloadlub w jQuery $(document).load(...).
Działające skrzypce włączone<body onload="myFunction()">
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunction(){
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html><script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>http://www.feedthebot.com/pagespeed/defer-loading-javascript.html
Jeśli używasz jQuery,
$(function() {...});
jest równa
$(document).ready(function () { })
lub inna krótka ręka:
$().ready(function () { })
Zobacz Jakie zdarzenie uruchamia funkcja JQuery $ ()? i https://api.jquery.com/ready/
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}spójrz tutaj: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
Czasami znajduję na bardziej złożonych stronach, że nie wszystkie elementy załadowały się w oknie czasowym. Ładunek jest uruchamiany. W takim przypadku dodaj setTimeout, zanim funkcja opóźni się za chwilę. Nie jest elegancki, ale jest to prosty hack, który dobrze się renderuje.
window.onload = function(){ doSomethingCool(); };staje się...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };Po prostu określ, <body onload="aFunction()">że będzie wywoływany po załadowaniu strony. Twój kod w skrypcie jest następnie załączony aFunction() { }.
<body onload="myFunction()">Ten kod działa dobrze.
Ale window.onloadmetoda ma różne zależności. Więc może nie działać cały czas.
Korzystanie z biblioteki YUI (uwielbiam to):
YAHOO.util.Event.onDOMReady(function(){
//your code
});Przenośny i piękny! Jeśli jednak nie używasz YUI do innych rzeczy (zobacz jego dokumentację), powiedziałbym, że nie warto go używać.
Uwaga: aby użyć tego kodu, musisz zaimportować 2 skrypty
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>Istnieje bardzo dobra dokumentacja na temat tego, jak wykryć, czy dokument został załadowany przy użyciu Javascript lub Jquery.
Można to osiągnąć za pomocą natywnego Javascript
if (document.readyState === "complete") {
init();
}Można to również zrobić w przedziale czasowym
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
init();
}
}, 100);switch (document.readyState) {
case "loading":
// The document is still loading.
break;
case "interactive":
// The document has finished loading. We can now access the DOM elements.
var span = document.createElement("span");
span.textContent = "A <span> element.";
document.body.appendChild(span);
break;
case "complete":
// The page is fully loaded.
console.log("Page is loaded completely");
break;
}Korzystanie z Jquery Aby sprawdzić, czy DOM jest gotowy
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});Aby sprawdzić, czy wszystkie zasoby są załadowane, użyj window.load
$( window ).load(function() {
console.log( "window loaded" );
});Użyj tego kodu z biblioteką jQuery, to zadziała idealnie.
$(window).bind("load", function() {
// your javascript event
});$(window).on("load", function(){ ... });.ready () działa najlepiej dla mnie.
$(document).ready(function(){ ... });.load () będzie działać, ale nie będzie czekać, aż strona zostanie załadowana.
jQuery(window).load(function () { ... });Nie działa dla mnie, psuje skrypt inline. Używam również jQuery 3.2.1 wraz z kilkoma innymi widelcami jQuery.
Aby ukryć nakładkę ładującą strony internetowe, używam:
<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>document.addEventListener('readystatechange', event => {
// When HTML/DOM elements are ready:
if (event.target.readyState === "interactive") { //does same as: ..addEventListener("DOMContentLoaded"..
alert("hi 1");
}
// When window loaded ( external resources are loaded too- `css`,`src`, etc...)
if (event.target.readyState === "complete") {
alert("hi 2");
}
});$(document).ready(function() { //same as: $(function() {
alert("hi 1");
});
$(window).load(function() {
alert("hi 2");
});UWAGA: - Nie używaj poniższego znacznika (ponieważ zastępuje on inne deklaracje tego samego rodzaju):
document.onreadystatechange = ...Jak mówi Daniel, możesz użyć document.onload.
Różne frameworki javascript (jQuery, Mootools itp.) Używają niestandardowego zdarzenia „domready”, które, jak sądzę, musi być bardziej skuteczne. Jeśli rozwijasz się przy użyciu javascript, zdecydowanie polecam wykorzystanie frameworka, ponieważ znacznie zwiększają twoją wydajność.
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>Radzę użyć asnycatrybutu dla tagu skryptu, który pomoże załadować zewnętrzne skrypty po załadowaniu strony
<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>użyj funkcji onload samowykonywania
window.onload = function (){
/* statements */
}(); onloadobsługi, stosując to podejście. Zamiast tego należy dodać detektor.