diff --git a/2-ui/5-loading/01-onload-ondomcontentloaded/article.md b/2-ui/5-loading/01-onload-ondomcontentloaded/article.md index 3d8b98180..9fa3af872 100644 --- a/2-ui/5-loading/01-onload-ondomcontentloaded/article.md +++ b/2-ui/5-loading/01-onload-ondomcontentloaded/article.md @@ -1,39 +1,39 @@ # Page: DOMContentLoaded, load, beforeunload, unload -The lifecycle of an HTML page has three important events: +El ciclo de vida de una página HTML tiene tres eventos importantes: -- `DOMContentLoaded` -- the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures `` and stylesheets may be not yet loaded. -- `load` -- not only HTML is loaded, but also all the external resources: images, styles etc. -- `beforeunload/unload` -- the user is leaving the page. +- `DOMContentLoaded` -- el navegador HTML está completamente cargado y el árbol DOM está construido, pero es posible que los recursos externos como `` y hojas de estilo aún no se hayan cargado. +- `load` -- no solo se carga el HTML, sino también todos los recursos externos: imágenes, estilos, etc. +- `beforeunload/unload` -- el usuario sale de la pagina. -Each event may be useful: +Cada evento puede ser útil: -- `DOMContentLoaded` event -- DOM is ready, so the handler can lookup DOM nodes, initialize the interface. -- `load` event -- external resources are loaded, so styles are applied, image sizes are known etc. -- `beforeunload` event -- the user is leaving: we can check if the user saved the changes and ask them whether they really want to leave. -- `unload` -- the user almost left, but we still can initiate some operations, such as sending out statistics. +- Evento `DOMContentLoaded` -- DOM está listo, por lo que el controlador puede buscar nodos DOM, inicializar la interfaz. +- Evento `load` -- se cargan recursos externos, por lo que se aplican estilos, se conocen tamaños de imagen, etc. +- Evento `beforeunload` -- el usuario se va: podemos comprobar si el usuario guardó los cambios y preguntarle si realmente quiere irse. +- Evento `unload` -- el usuario casi se fue, pero aún podemos iniciar algunas operaciones, como enviar estadísticas. -Let's explore the details of these events. +Exploremos los detalles de estos eventos. ## DOMContentLoaded -The `DOMContentLoaded` event happens on the `document` object. +El evento `DOMContentLoaded` ocurre en el objeto `document`. -We must use `addEventListener` to catch it: +Debemos usar `addEventListener` para capturarlo: ```js document.addEventListener("DOMContentLoaded", ready); -// not "document.onDOMContentLoaded = ..." +// no "document.onDOMContentLoaded = ..." ``` -For instance: +Por ejemplo: ```html run height=200 refresh ``` -In the example above, we first see "Library loaded...", and then "DOM ready!" (all scripts are executed). +En el ejemplo anterior, primero vemos "Biblioteca cargada ..." y luego "¡DOM listo!" (se ejecutan todos los scripts). -```warn header="Scripts that don't block DOMContentLoaded" -There are two exceptions from this rule: -1. Scripts with the `async` attribute, that we'll cover [a bit later](info:script-async-defer), don't block `DOMContentLoaded`. -2. Scripts that are generated dynamically with `document.createElement('script')` and then added to the webpage also don't block this event. +```warn header="Scripts que no bloquean DOMContentLoaded" +Hay dos excepciones a esta regla: +1. Scripts con el atributo `async`, que cubriremos [un poco más tarde](info:script-async-defer), no bloquea el `DOMContentLoaded`. +2. Los scripts que se generan dinámicamente con `document.createElement('script')` y luego se agregan a la página web, tampoco bloquean este evento. ``` -### DOMContentLoaded and styles +### DOMContentLoaded y estilos -External style sheets don't affect DOM, so `DOMContentLoaded` does not wait for them. +Las hojas de estilo externas no afectan a DOM, por lo que `DOMContentLoaded` no las espera. -But there's a pitfall. If we have a script after the style, then that script must wait until the stylesheet loads: +Pero hay una trampa. Si tenemos un script después del estilo, entonces ese script debe esperar hasta que se cargue la hoja de estilo: ```html run ``` -The reason for this is that the script may want to get coordinates and other style-dependent properties of elements, like in the example above. Naturally, it has to wait for styles to load. +La razón de esto es que el script puede querer obtener coordenadas y otras propiedades de elementos dependientes del estilo, como en el ejemplo anterior. Naturalmente, tiene que esperar a que se carguen los estilos. -As `DOMContentLoaded` waits for scripts, it now waits for styles before them as well. +Como DOMContentLoaded espera los scripts, ahora también espera a los estilos que están antes que ellos. -### Built-in browser autofill +### Autocompletar del navegador integrado -Firefox, Chrome and Opera autofill forms on `DOMContentLoaded`. +Firefox, Chrome y Opera autocompletan formularios en `DOMContentLoaded`. -For instance, if the page has a form with login and password, and the browser remembered the values, then on `DOMContentLoaded` it may try to autofill them (if approved by the user). +Por ejemplo, si la página tiene un formulario con nombre de usuario y contraseña, y el navegador recuerda los valores, entonces en `DOMContentLoaded` puede intentar completarlos automáticamente (si el usuario lo aprueba). -So if `DOMContentLoaded` is postponed by long-loading scripts, then autofill also awaits. You probably saw that on some sites (if you use browser autofill) -- the login/password fields don't get autofilled immediately, but there's a delay till the page fully loads. That's actually the delay until the `DOMContentLoaded` event. +Entonces, si `DOMContentLoaded` es pospuesto por scripts de largo tiempo de carga, el autocompletado también espera. Probablemente haya visto eso en algunos sitios (si usa la función de autocompletar del navegador): los campos de inicio de sesión/contraseña no se autocompletan inmediatamente, sino con retraso hasta que la página se carga por completo. En realidad es el retraso hasta el evento `DOMContentLoaded`. ## window.onload [#window-onload] -The `load` event on the `window` object triggers when the whole page is loaded including styles, images and other resources. This event is available via the `onload` property. +El evento `load` en el objeto `window` se activa cuando se carga toda la página, incluidos estilos, imágenes y otros recursos. Este evento está disponible a través de la propiedad `onload`. -The example below correctly shows image sizes, because `window.onload` waits for all images: +El siguiente ejemplo muestra correctamente los tamaños de las imágenes, porque `window.onload` espera todas las imágenes: ```html run height=200 refresh @@ -127,45 +127,45 @@ The example below correctly shows image sizes, because `window.onload` waits for ## window.onunload -When a visitor leaves the page, the `unload` event triggers on `window`. We can do something there that doesn't involve a delay, like closing related popup windows. +Cuando un visitante abandona la página, el evento `unload` se activa en `window`. Podemos hacer algo allí que no implique un retraso, como cerrar ventanas emergentes relacionadas. -The notable exception is sending analytics. +La excepción notable es el envío de análisis. -Let's say we gather data about how the page is used: mouse clicks, scrolls, viewed page areas, and so on. +Supongamos que recopilamos datos sobre cómo se usa la página: clicks del mouse, desplazamientos, áreas de página visitadas, etc. -Naturally, `unload` event is when the user leaves us, and we'd like to save the data on our server. +Naturalmente, el evento `unload` sucede cuando el usuario nos deja y nos gustaría guardar los datos en nuestro servidor. -There exists a special `navigator.sendBeacon(url, data)` method for such needs, described in the specification . +Existe un método especial `navigator.sendBeacon(url, data)` para tales necesidades, descrito en la especificación . -It sends the data in background. The transition to another page is not delayed: the browser leaves the page, but still performs `sendBeacon`. +Este envía los datos en segundo plano. La transición a otra página no se retrasa: el navegador abandona la página, pero aún realiza `sendBeacon`. -Here's how to use it: +Así es como se usa: ```js -let analyticsData = { /* object with gathered data */ }; +let analyticsData = { /* objeto con datos recopilados */ }; window.addEventListener("unload", function() { navigator.sendBeacon("/analytics", JSON.stringify(analyticsData)); }; ``` -- The request is sent as POST. -- We can send not only a string, but also forms and other formats, as described in the chapter , but usually it's a stringified object. -- The data is limited by 64kb. +- La solicitud se envía como POST. +- Podemos enviar no solo una cadena, sino también formularios y otros formatos, como se describe en el capítulo , pero generalmente es un objeto string. +- Los datos están limitados por 64 kb. -When the `sendBeacon` request is finished, the browser probably has already left the document, so there's no way to get server response (which is usually empty for analytics). +Cuando finaliza la solicitud `sendBeacon`, es probable que el navegador ya haya abandonado el documento, por lo que no hay forma de obtener la respuesta del servidor (que suele estar vacía para análisis). -There's also a `keepalive` flag for doing such "after-page-left" requests in [fetch](info:fetch) method for generic network requests. You can find more information in the chapter . +También hay una bandera `keepalive` para hacer tales solicitudes "after-page-left" en el método [fetch](info: fetch) para solicitudes de red genéricas. Puede encontrar más información en el capítulo . -If we want to cancel the transition to another page, we can't do it here. But we can use another event -- `onbeforeunload`. +Si queremos cancelar la transición a otra página, no podemos hacerlo aquí. Pero podemos usar otro evento: `onbeforeunload`. ## window.onbeforeunload [#window.onbeforeunload] -If a visitor initiated navigation away from the page or tries to close the window, the `beforeunload` handler asks for additional confirmation. +Si un visitante inició la navegación fuera de la página o intenta cerrar la ventana, el controlador `beforeunload` solicita una confirmación adicional. -If we cancel the event, the browser may ask the visitor if they are sure. +Si cancelamos el evento, el navegador puede preguntar al visitante si está seguro. -You can try it by running this code and then reloading the page: +Puede probarlo ejecutando este código y luego recargando la página: ```js run window.onbeforeunload = function() { @@ -173,65 +173,65 @@ window.onbeforeunload = function() { }; ``` -For historical reasons, returning a non-empty string also counts as canceling the event. Some time ago browsers used to show it as a message, but as the [modern specification](https://html.spec.whatwg.org/#unloading-documents) says, they shouldn't. +Por razones históricas, devolver una cadena no vacía también cuenta como cancelar el evento. Hace algún tiempo, los navegadores solían mostrarlo como un mensaje, pero como dice la [especificación moderna](https://html.spec.whatwg.org/#unloading-documents), no deberían. -Here's an example: +Aquí hay un ejemplo: ```js run window.onbeforeunload = function() { - return "There are unsaved changes. Leave now?"; + return "Hay cambios sin guardar. ¿Salir ahora?"; }; ``` -The behavior was changed, because some webmasters abused this event handler by showing misleading and annoying messages. So right now old browsers still may show it as a message, but aside of that -- there's no way to customize the message shown to the user. +El comportamiento se modificó, porque algunos webmasters abusaron de este controlador de eventos mostrando mensajes engañosos y molestos. Entonces, en este momento, los navegadores antiguos aún pueden mostrarlo como un mensaje, pero aparte de eso, no hay forma de personalizar el mensaje que se muestra al usuario. ## readyState -What happens if we set the `DOMContentLoaded` handler after the document is loaded? +¿Qué sucede si configuramos el controlador `DOMContentLoaded` después de cargar el documento? -Naturally, it never runs. +Naturalmente, nunca se ejecutará. -There are cases when we are not sure whether the document is ready or not. We'd like our function to execute when the DOM is loaded, be it now or later. +Hay casos en los que no estamos seguros de si el documento está listo o no. Nos gustaría que nuestra función se ejecute cuando se cargue el DOM, ya sea ahora o más tarde. -The `document.readyState` property tells us about the current loading state. +La propiedad `document.readyState` nos informa sobre el estado de carga actual. -There are 3 possible values: +Hay 3 valores posibles: -- `"loading"` -- the document is loading. -- `"interactive"` -- the document was fully read. -- `"complete"` -- the document was fully read and all resources (like images) are loaded too. +- `"loading"` -- el documento se está cargando. +- `"interactive"` -- el documento fue leído por completo. +- `"complete"` -- el documento se leyó por completo y todos los recursos (como imágenes) también se cargaron. -So we can check `document.readyState` and setup a handler or execute the code immediately if it's ready. +Entonces podemos verificar `document.readyState` y configurar un controlador o ejecutar el código inmediatamente si está listo. -Like this: +Como esto: ```js function work() { /*...*/ } if (document.readyState == 'loading') { - // loading yet, wait for the event + // cargando todavía, esperar el evento document.addEventListener('DOMContentLoaded', work); } else { - // DOM is ready! + // DOM está listo! work(); } ``` -There's also the `readystatechange` event that triggers when the state changes, so we can print all these states like this: +También existe el evento `readystatechange` que se activa cuando cambia el estado, por lo que podemos imprimir todos estos estados así: ```js run -// current state +// estado actual console.log(document.readyState); -// print state changes +//imprimir los cambios de estado document.addEventListener('readystatechange', () => console.log(document.readyState)); ``` -The `readystatechange` event is an alternative mechanics of tracking the document loading state, it appeared long ago. Nowadays, it is rarely used. +El evento `readystatechange` es una mecánica alternativa para rastrear el estado de carga del documento, apareció hace mucho tiempo. Hoy en día, rara vez se usa. -Let's see the full events flow for the completeness. +Veamos el flujo de eventos completo para ver si están completados. -Here's a document with `