El concepto de carga de HTML/JS puede ayudarlo a controlar el comportamiento de la página web una vez que se ha cargado.

Cargar una página web incluye esperar a que el contenido de la página, las imágenes y otros recursos se carguen por completo.

Algunas páginas web aseguran que ciertas funcionalidades no ocurran hasta que todo haya terminado de cargarse. Un ejemplo incluye la recuperación de datos de una base de datos solo después de que se haya cargado la página.

Hay diferentes formas de verificar si una página web está completamente cargada. Puede escuchar eventos usando controladores de eventos de JavaScript, use el ventana.onload evento de JavaScript, o el cargar atributo HTML.

Cómo usar onLoad con el elemento HTML del cuerpo

Puede usar eventos de JavaScript para verificar si el cuerpo de la página web se ha cargado. Necesitará un archivo HTML con contenido de página y un archivo JavaScript para ejecutar el código.

El código utilizado en este proyecto está disponible en un repositorio GitHub y es gratis para su uso bajo la licencia MIT.

instagram viewer
  1. En un nuevo archivo HTML llamado índice.html, agregue el siguiente código HTML básico:
    html>
    <html>
    <cabeza>
    <título>Ejemplo usando onloadtítulo>
    cabeza>
    <cuerpo>
    <h1>Ejemplo usando onload()h1>
    <pag>Este ejemplo demuestra cómo usar el evento onload() en JavaScript.pag>
    cuerpo>
    html>
  2. Cree un nuevo archivo en la misma carpeta llamado guión.js. Vincule este archivo a su página HTML usando la etiqueta de secuencia de comandos. Puede agregar la etiqueta del script en la parte inferior de la etiqueta del cuerpo:
    <cuerpo>
     Tu contenido 
    <guionorigen="script.js">guion>
    cuerpo>
  3. Dentro del contenido de su etiqueta de cuerpo HTML, agregue una etiqueta de párrafo vacía.
    <pagidentificación="producción">pag>
  4. Dentro del archivo JavaScript, agregue el ventana.onload función de evento Esto se ejecutará cuando la página se haya cargado:
    ventana.cargar = función() {
    // código para ejecutar cuando se carga la página
    };
  5. Dentro de la función, complete el contenido de la etiqueta de párrafo vacía. Esto cambiará la etiqueta del párrafo para mostrar un mensaje solo cuando la página se haya cargado:
    documento.getElementById("producción").innerHTML = "¡Página cargada!";
  6. Alternativamente, también puede usar un detector de eventos para escuchar el DOMContentLoaded evento. DOMContentLoaded se activa antes que window.onload. Se activa tan pronto como el documento HTML está listo, en lugar de esperar a que se carguen todos los recursos externos.
    documento.addEventListener('DOMContentLoaded', función() {
    documento.getElementById("producción").innerHTML = "¡Página cargada!";
    });
  7. Abra el archivo index.html en un navegador web para ver el mensaje cuando la página termine de cargarse:
  8. En lugar de usar eventos de JavaScript para verificar si una página se ha cargado, también puede usar el cargar Atributo HTML para el mismo resultado. Agregue el atributo onload a la etiqueta del cuerpo en su archivo HTML:
    <cuerpocargar="en eso()">
  9. Crear el en eso() función dentro del archivo JavaScript. No se recomienda utilizar el atributo onload HTML y el evento onload JavaScript al mismo tiempo. Si lo hace, podría provocar un comportamiento inesperado o conflictos entre las dos funciones.
    funciónen eso() {
    documento.getElementById("producción").innerHTML = "¡Página cargada!";
    }

Recomendamos usar los detectores de eventos de JavaScript y el ventana.onload método sobre el HTML cargar atributo porque mantener el comportamiento y el contenido de la página web separados es una buena práctica. Además, los detectores de eventos de JavaScript brindan más compatibilidad y flexibilidad con respecto a los otros dos métodos.

Cómo usar onLoad con el elemento HTML de imagen

También puede usar el evento onload para ejecutar código cuando otros elementos se cargan en la página. Un ejemplo de esto es el elemento de imagen.

  1. Dentro de la misma carpeta que su archivo index.html, agregue cualquier imagen.
  2. Dentro del archivo HTML, agregue una etiqueta de imagen y vincule el atributo src al nombre de la imagen guardada en la carpeta.
    <imagenidentificación="Mi imagen"origen="Pidgeymon.png"ancho="300">
  3. Agregue otra etiqueta de párrafo vacía para mostrar un mensaje cuando se cargue la imagen:
    <pagidentificación="ImagenCargadaMensaje">pag>
  4. Dentro del archivo JavaScript, agregue un evento onload en la imagen. Usa la identificación única Mi imagen para determinar a qué elemento de imagen agregar el evento onload:
    variable miImagen = documento.getElementById("Mi imagen");
    miImagen.onload = función() {

    };
  5. Dentro del evento onload, cambie el HTML interno para agregar el Imagen cargada mensaje:
    documento.getElementById("ImagenCargadaMensaje").innerHTML = "¡Imagen cargada!";
  6. En lugar de usar miImagen.onload, también puede usar un detector de eventos para escuchar el carga Evento JavaScript:
    miImagen.addEventListener('carga', función() {
    documento.getElementById("ImagenCargadaMensaje").innerHTML = "¡Imagen cargada!";
    });
  7. Abra index.html en un navegador web para ver la imagen y el mensaje:
  8. Para obtener el mismo resultado, también puede utilizar el atributo HTML onload. Similar a la etiqueta del cuerpo, agregue un atributo onload a la etiqueta img:
    <imagenidentificación="Mi imagen"origen="Pidgeymon.png"ancho="300"cargar="imagen cargada ()">
  9. Agregue la función en el archivo JavaScript, para ejecutar el código cuando la imagen se haya cargado:
    funciónimagen cargada() {
    documento.getElementById("ImagenCargadaMensaje").innerHTML = "¡Imagen cargada!";
    }

Cómo usar onLoad al cargar JavaScript

Puede utilizar el atributo onload de HTML para comprobar si el navegador ha terminado de cargar el archivo JavaScript. No hay un evento de carga de JavaScript equivalente para la etiqueta de secuencia de comandos.

  1. Agregue el atributo onload a la etiqueta del script en su archivo HTML.
    <guionorigen="script.js"cargar="CargadoJs ()">guion>
  2. Agregue la función a su archivo JavaScript. Imprimir un mensaje por iniciar sesión en la consola del navegador:
    funciónCargadoJs() {
    consola.registro("¡JS cargado por el navegador!");
    }
  3. Abra el archivo index.html en el navegador. Puede utilizar Chrome DevTools para ver cualquier salida de mensajes en la consola.

Cargar páginas web en el navegador

Ahora puede usar funciones y eventos para ejecutar cierto código cuando una página web ha terminado de cargarse. Cargar páginas es un factor importante para crear una experiencia de usuario fluida y sin problemas.

Puede obtener más información sobre cómo puede integrar diseños de página de carga más interesantes en su sitio web.