{"id":655,"date":"2023-09-17T17:05:00","date_gmt":"2023-09-17T15:05:00","guid":{"rendered":"https:\/\/blog.pirulug.com\/?p=655"},"modified":"2023-09-17T17:05:00","modified_gmt":"2023-09-17T15:05:00","slug":"como-cargar-javascript-despues-de-que-la-pagina-se-ha-cargado-completamente","status":"publish","type":"post","link":"https:\/\/blog.pirulug.com\/?p=655","title":{"rendered":"C\u00f3mo Cargar JavaScript Despu\u00e9s de que la P\u00e1gina se Ha Cargado Completamente"},"content":{"rendered":"

\n A menudo, es importante asegurarse de que tu c\u00f3digo JavaScript se ejecute
\n despu\u00e9s de que la p\u00e1gina web haya cargado completamente para evitar errores y
\n garantizar que todo funcione seg\u00fan lo previsto. En este art\u00edculo, aprender\u00e1s
\n c\u00f3mo lograr esto utilizando dos eventos clave en JavaScript:
\n DOMContentLoaded<\/code> y load<\/code>.\n<\/p>\n

Evento DOMContentLoaded<\/code><\/h2>\n

\n El evento DOMContentLoaded<\/code> se dispara cuando el documento HTML se
\n ha cargado y analizado completamente, lo que significa que el DOM (Modelo de
\n Objetos del Documento) est\u00e1 listo para ser manipulado por JavaScript. Para
\n ejecutar tu c\u00f3digo JavaScript despu\u00e9s de que se haya cargado la estructura
\n HTML, puedes usar este evento de la siguiente manera:\n<\/p>\n

document.addEventListener('DOMContentLoaded', function() {\n  \/\/ Tu c\u00f3digo JavaScript aqu\u00ed\n});\n<\/code><\/pre>\n
Este enfoque es ideal cuando solo necesitas que el DOM est\u00e9 listo.<\/p>\n
Evento load<\/code><\/h2>\n
\n  Si necesitas esperar a que toda la p\u00e1gina, incluyendo im\u00e1genes, estilos y
\n  otros recursos, se cargue completamente antes de ejecutar tu JavaScript,
\n  puedes usar el evento load<\/code>. Este evento se dispara cuando todo se
\n  ha cargado, y puedes utilizarlo de la siguiente manera:\n<\/p>\n
window.addEventListener('load', function() {\n  \/\/ Tu c\u00f3digo JavaScript aqu\u00ed\n});\n<\/code><\/pre>\n
\n  Este enfoque es \u00fatil cuando tu c\u00f3digo JavaScript depende de que todos los
\n  recursos est\u00e9n disponibles.\n<\/p>\n
Ejemplo Completo<\/h2>\n
\n  Aqu\u00ed tienes un ejemplo completo de c\u00f3mo usar estos eventos en tu p\u00e1gina HTML:\n<\/p>\n
<!DOCTYPE html>\n<html>\n<head>\n  <title>Mi P\u00e1gina<\/title>\n<\/head>\n<body>\n  <!-- Contenido de la p\u00e1gina -->\n\n  <script>\n    document.addEventListener('DOMContentLoaded', function() {\n      \/\/ Tu c\u00f3digo JavaScript aqu\u00ed, se ejecutar\u00e1 despu\u00e9s de cargar el DOM.\n      console.log('El DOM se ha cargado completamente.');\n    });\n    \n    window.addEventListener('load', function() {\n      \/\/ Tu c\u00f3digo JavaScript aqu\u00ed, se ejecutar\u00e1 despu\u00e9s de cargar todos los recursos.\n      console.log('La p\u00e1gina se ha cargado completamente con todos los recursos.');\n    });\n  <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n
\n  Utilizar estos eventos te permite controlar el momento exacto en que se
\n  ejecuta tu c\u00f3digo JavaScript, asegurando que tu p\u00e1gina funcione sin problemas
\n  y que los usuarios obtengan la mejor experiencia posible.<\/p>\n","protected":false},"excerpt":{"rendered":"
A menudo, es importante asegurarse de que tu c\u00f3digo JavaScript se ejecute despu\u00e9s de que la p\u00e1gina web haya cargado completamente para evitar errores y garantizar que todo funcione seg\u00fan lo previsto. En este art\u00edculo, aprender\u00e1s c\u00f3mo lograr esto utilizando dos eventos clave en JavaScript: DOMContentLoaded y load. Evento DOMContentLoaded El evento DOMContentLoaded se dispara […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[67,74],"class_list":["post-655","post","type-post","status-publish","format-standard","hentry","category-sin-categoria","tag-html","tag-js"],"_links":{"self":[{"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=\/wp\/v2\/posts\/655","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=655"}],"version-history":[{"count":0,"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=\/wp\/v2\/posts\/655\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.pirulug.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}