Método 1: Usar el método on() con el evento de carga: El método on() en jQuery se usa para adjuntar un controlador de eventos para cualquier evento a los elementos seleccionados. El objeto de la ventana se selecciona primero usando un selector y el método on() se usa en este elemento.
El evento ‘cargar’ se activa cuando toda la página ha terminado de cargarse, incluidos otros recursos como las hojas de estilo y las imágenes. Este evento se verifica para pasarlo al método on(). La función a ejecutar se puede invocar luego en el segundo parámetro de este método. Esto ahora invocará la función después de que la página haya terminado de cargarse.
Sintaxis:
$(window).on('load', functionTobeLoaded() )
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to load jQuery code
after page loading?
</title>
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to load jQuery code
after page loading?
</b>
<p>
The current datetime is:
<span class="date"></span>
</p>
<script type="text/javascript">
$(window).on('load', showDatetime());
function showDatetime() {
document.querySelector(".date").textContent
= new Date();
}
</script>
</body>
</html>
Salida: Después de cargar la página:
Método 2: Usar el método ready(): El método ready() en jQuery se usa para ejecutar código cada vez que el DOM se vuelve seguro para ser manipulado. Acepta un controlador que se puede pasar con la función requerida para ser ejecutado. Ahora invocará la función después de que la página haya terminado de cargarse.
Sintaxis:
$(document).ready( functionTobeLoaded() )
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to load jQuery code
after page loading?
</title>
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to load jQuery code
after page loading?
</b>
<p>
The current datetime is:
<span class="date"></span>
</p>
<script type="text/javascript">
$(document).ready(
showDatetime()
);
function showDatetime() {
document.querySelector(".date").textContent
= new Date();
}
</script>
</body>
</html>
Salida: después de cargar la página
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA