How to run JavaScript code after page load using pure JS and jQuery

by admin Leave Comment

Tässä postauksessa katsomme, miten JavaScript-koodia voidaan suorittaa sivun lataamisen jälkeen käyttämällä puhdasta JS:ää ja jQueryä.

JavaScript- ja jQuery-kirjasto tarjoaa useita tapoja suorittaa funktio sen jälkeen, kun DOM:n sisältö (DOM, englanninkielinen tiedosto, englanninkielinen tiedosto) on valmis. Tämä viesti tarjoaa yksityiskohtaisen katsauksen menetelmiin, joilla tämä voidaan toteuttaa.

JavaScript

Puhtaassa JavaScriptissä vakiotapa havaita täysin ladattu sivu on käyttää onload-tapahtumankäsittelijän ominaisuutta. Load-tapahtuma ilmaisee, että kaikki verkkosivun varat on ladattu. Tätä voidaan kutsua window.onload JavaScriptissä.

1
2
3
ikkuna.onload = function() {
alert(’Sivu on ladattu’);
};

Muokkaus JSFiddle:ssä

Seuraavassa koodissa käytetään addEventListener()-menetelmää, joka kuuntelee load-tapahtumaa havaitakseen täysin ladatun sivun. Tämä vastaa yllä olevaa koodia.

1
2
3
window.addEventListener(”load”, function() {
alert(’Sivu on ladattu’);
});

Muokkaa JSFiddle:ssä

Vaikka ei olekaan suositeltava vaihtoehto, voit kutsua JavaScript-toimintoa sivulatauksen yhteydessä myös HTML-tunnisteen <body> avulla. Ideana on käyttää onload-attribuuttia body-tagissa.

1
2
3
4
5
6
7
8
9
10
11
<html>
<body onload=”loaded();” ></body>
<script>
function loaded() {
alert(’Sivu on ladattu’);
}

1
2
3
document.addEventListener(”DOMContentLoaded”, function() {
alert(’Sivu on ladattu’);
});

Muokkaus JSFiddle

jQuery

JQueryn avulla voit suorittaa JavaScript-koodia heti, kun DOM on ladattu kokonaan käyttämällä .ready()-metodia, joka vastaa window.onload:aa JavaScriptissä. Voit käyttää mitä tahansa seuraavista syntakseista, jotka ovat kaikki samat:

  • $(document).ready(handler)
  • $(”document”).ready(handler)
  • $().ready(handler)
1
2
3
$(document).ready(function() {
alert(’Sivu on ladattu’);
});

Muokkaus JSFiddle:ssä

Vaihtoehtoisesti voidaan kutsua $(handler), joka vastaa yllä olevaa syntaksia:

1
2
3
$(function() {
alert(’Sivu on ladattu’);
});

Muokkaa JSFiddle

Voit myös tarkkailla load-tapahtumaa window-objektilla $(window).on("load", handler)-metodilla.

1
2
3
$(window).bind(’load’, function() {
alert(’Sivu on ladattu’);
});

Muokkaus JSFiddlessä

Vastaa

Sähköpostiosoitettasi ei julkaista.