JavaScript wykonujący po załadowaniu strony
Wykonuję skrypt zewnętrzny, używając <script> wewnątrz <head>.
Teraz ponieważ skrypt wykonuje przed Strona się załadowała, nie mam dostępu do <body>, między innymi. Chciałbym wykonać trochę JavaScript po "załadowaniu" dokumentu(HTML w pełni pobrany i w-RAM). Czy są jakieś zdarzenia, które mogę zaczepić, gdy mój skrypt zostanie uruchomiony podczas ładowania strony?
24 answers
Te rozwiązania będą działać:
<body onload="script();">
Lub
document.onload = function ...
Lub nawet
window.onload = function ...
Zauważ, że ostatnia opcja jest lepszym rozwiązaniem, ponieważ jest Dyskretna i jest uważana za bardziej standardową.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:26:35
Dość przenośny, nie-frameworkowy sposób na ustawienie funkcji do uruchomienia 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;
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-08 13:45:03
Możesz umieścić atrybut "onload" wewnątrz ciała
...<body onload="myFunction()">...
Lub jeśli używasz jQuery, możesz zrobić
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })
Zauważ, że $(window).load zostanie uruchomiony po renderowaniu dokumentu na stronie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-04-30 16:42:29
Należy pamiętać, że ładowanie strony ma więcej niż jeden etap. Btw, to jest czysty JavaScript
"Domcontent"
To zdarzenie jest wywoływane, gdypoczątkowy dokument HTML został całkowicie załadowany i przetworzony , bez czekania na arkusze stylów, obrazy i ramki podrzędne, aby zakończyć ładowanie. Na tym etapie można programowo zoptymalizować ładowanie obrazów i css w oparciu o urządzenie użytkownika lub prędkość przepustowości.
Exectues po załadowaniu DOM (przed IMG i css):
document.addEventListener("DOMContentLoaded", function(){
//....
});
Uwaga: synchroniczny JavaScript wstrzymuje parsowanie DOM. Jeśli chcesz, aby DOM był przetwarzany tak szybko, jak to możliwe po tym, jak użytkownik zażądał strony, możesz włączyć asynchroniczny skrypt JavaScript i zoptymalizować Ładowanie arkuszy stylów
"load"
Bardzo inne zdarzenie, load , powinno być używane tylko do wykrywaniaw pełni załadowanej strony . Bardzo popularnym błędem jest używanie load tam, gdzie DOMContentLoaded byłby o wiele bardziej odpowiednie, więc bądź ostrożny.
Exectues po załadowaniu i przetworzeniu 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 wszystkich wydarzeń MDN:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-14 15:05:12
Jeśli skrypty są ładowane wewnątrz <head> dokumentu, to możliwe jest użycie atrybutu defer w znaczniku script.
Przykład:
<script src="demo_defer.js" defer></script>
Od https://developer.mozilla.org:
Defer
Ten atrybut Boolean jest ustawiony tak, aby wskazywał przeglądarce, że skrypt ma być wykonana po przetworzeniu dokumentu, ale przed odpalam Domcontent.
atrybut ten nie może należy stosować, jeżeli src atrybutu nie ma (tzn. dla skryptów inline), w tym przypadku byłoby bez efektu.
Aby uzyskać podobny efekt dla dynamicznie wstawianych skryptów użyj async = false. Skrypty z atrybutem defer będą wykonywane w kolejność, w jakiej występują w dokumencie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-21 13:48:41
Oto skrypt oparty na odroczonym wczytywaniu 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 umieścić?
Wklej kod w HTML tuż przed znacznikiem
</body>(w dolnej części pliku HTML).
Co to robi?
Ten kod mówi czekać na załadowanie całego dokumentu, a następnie załadować plik zewnętrzny
deferredfunctions.js.
Oto przykład powyższego kodu - odroczenie renderowania JS
I napisał to na podstawie odroczył Ładowanie javascript pagespeed Google concept, a także pochodzi z tego artykułu odroczył Ładowanie javascript
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-22 10:37:07
Spójrz na hooking document.onload lub w jQuery $(document).load(...).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-04-30 16:40:17
Najlepsza metoda, polecana również przez Google. :)
<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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-11 19:23:34
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-08 13:23:56
Jeśli używasz jQuery,
$(function() {...});
Jest równoważne
$(document).ready(function () { })
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:47:32
<body onload="myFunction()">
Ten kod działa dobrze.
Ale window.onload metoda ma różne zależności. Więc może nie działać cały czas.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-29 11:58:32
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}
Zobacz tutaj: http://msdn.microsoft.com/en-us/library/ie/ms536957 (v=vs.85). aspx
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-11 11:41:40
Po prostu zdefiniuj <body onload="aFunction()">, które zostaną wywołane po załadowaniu strony. Twój kod w skrypcie jest załączony przez aFunction() { }.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-08 02:40:46
Korzystanie z biblioteki Yui (kocham ją):
YAHOO.util.Event.onDOMReady(function(){
//your code
});
Uwaga: Aby użyć tego kodu należy 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-04-30 17:36:51
Znajduję czasami na bardziej złożonych stronach, że nie wszystkie elementy zostały załadowane przez okno czasowe./ align = "left" / Jeśli tak jest, dodaj setTimeout przed funkcją opóźnienia jest moment. To nie jest elegancki, ale to prosty hack, który renderuje dobrze.
window.onload = function(){ doSomethingCool(); };
Staje się...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-11 10:45:47
Istnieje bardzo dobra dokumentacja, jak wykryć, czy dokument załadował za pomocą Javascript lub Jquery.
Używając natywnego Javascript można to osiągnąć
if (document.readyState === "complete") {
init();
}
Można to również zrobić wewnątrz interwału
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;
}
Używanie Jquery Aby sprawdzić tylko, 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 będzie działać idealnie.
$(window).bind("load", function() {
// your javascript event
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-25 19:53:09
$(okno).on ("load", function () {... });
Dla mnie działa najlepiej.$(document).ready(function(){ ... }
Będzie działać, ale nie będzie czekać, aż strona zostanie załadowana.
jQuery(window).load(function () { ... }
Nie działa dla mnie, łamie skrypt następny do inline. Używam również jQuery 3.2.1 wraz z innymi widelcami jQuery.
Aby ukryć nakładkę ładowania stron internetowych, używam następującego:
<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-08 02:42:57
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-08 14:02:13
Jak mówi Daniel, przydałby ci się dokument.onload.
Różne frameworki javascript (jQuery, Mootools, itp.) Użyj niestandardowego zdarzenia "domready" , które chyba musi być bardziej skuteczne. Jeśli rozwijasz się za pomocą javascript, zdecydowanie polecam wykorzystanie frameworka, który znacznie zwiększa twoją produktywność.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-04-30 16:47:28
Radzę użyć atrybutu asnyc dla znacznika script, który pomoże Ci 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-30 05:43:37
JQuery owija to dla Ciebie. Prawdopodobnie okaże się, że jest to najprostsze rozwiązanie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-04-30 16:42:09
Użyj funkcji self execution onload
window.onload = function (){
/* statements */
}();
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-19 15:59:06
/ / jest przetestowany i działa:)
$(dokument).ready(funkcja() { functon1(); Funkcja2() });