Oct 1, 2020 · Sep 29, 2020 · Sep 29, 2020 · Sep 29, 2020 · Sep 29, 2020 · Sep 29, 2020
diff --git a/2-ui/5-loading/03-onload-onerror/1-load-img-callback/solution.md b/2-ui/5-loading/03-onload-onerror/1-load-img-callback/solution.md

 The algorithm:
 1.Make`img`for every source.
 2.Add`onload/onerror`for every image.
 3.Increase the counter when either`onload`or`onerror`triggers.
 4.When the counter value equals to the sources count -- we're done: `callback()`.
 El algoritmo:
 1.Crear una`img`para cada fuente.
 2.Agregar los eventos`onload/onerror`para cada imágen.
 3.Incrementar el contador cuando el evento`onload`o el evento`onerror`se dispare.
 4.Cuando el valor del contador es igual a la cantidad de fuentes, hemos terminado: `callback()`.
diff --git a/2-ui/5-loading/03-onload-onerror/1-load-img-callback/task.md b/2-ui/5-loading/03-onload-onerror/1-load-img-callback/task.md

 ---

 #Load images with acallback
 #Cargando imágenes con una un función de retorno (`callback`)

 Normally, images are loaded when they are created. So when we add `<img>`to the page, the user does not see the picture immediately. The browser needs to load it first.
 Normalmente, las imágenes son cargadas cuando son creadas. Entonces, cuando nosotros agregamos `<img>`a la página el usuario no ve la imágen inmediatamente. El navegador necesita cargarlo primero.

 To show an image immediately, we can create it "in advance",like this:
 Para mostrar una imágen inmediatamente, podemos crearlo "en avance",como esto:

 ```js
 let img = document.createElement('img');
 img.src = 'my.jpg';
 ```

 The browser starts loading the image and remembers it in thecache.Later, when the same image appears in the document (nomatter how), it shows up immediately.
 El navegador comienza a cargar la imágen y lo guarda en elcache.Después cuando la misma imágen aparece en el documento (noimporta cómo) la muestra inmediatamente.

 **Create a function `preloadImages(sources, callback)`that loads all images from the array`sources` and, when ready, runs`callback`.**
 **Crear una función `preloadImages(sources, callback)`que cargue todas las imágenes desde una lista de fuentes (`sources`) y, cuando esten listas, ejecutar la función de retorno (`callback`).**

 For instance, this will show an`alert` after the images are loaded:
 Por ejemplo: esto puede mostrar una alerta (`alert`) después de que la imágen sea cargada:

 ```js
 function loaded() {
  alert("Images loaded")
  alert("Imágenes cargadas")
 }

 preloadImages(["1.jpg", "2.jpg", "3.jpg"], loaded);
 ```

 In case of an error,the function should still assume the picture "loaded".
 En caso de un error,la función debería seguir asumiendo que la imágen ha sido "cargada".

 In other words, the`callback` is executed when all images are either loaded or errored out.
 En otras palabras, la función de retorno (`callback`) es ejecutada cuando todas las imágenes han sido cargadas o no.

 The function is useful, for instance, when we plan to show a gallery with many scrollable images, and want to be sure that all images are loaded.
 La función es útil, por ejemplo, cuando planeamos mostrar una galería con muchas imágenes desplazables y estar seguros que todas las imágenes estan cargadas.

 In the source document you can find links to test images, and also the code to check whether they are loaded or not. It should output `300`.
 En el documento fuente puedes encontrar enlaces para probar imágenes y también el codigo para verificar si han sido cargadas o no. Debería devolver `300`.
diff --git a/2-ui/5-loading/03-onload-onerror/article.md b/2-ui/5-loading/03-onload-onerror/article.md
 #Resource loading: onloadand onerror
 #Carga de recursos: onloady onerror

 The browser allows us to track the loading of external resources -- scripts, iframes,pictures and so on.
 El navegador nos permite hacer seguimiento de la carga de recursos externos: scripts, iframes,imagenes y más.

 There are two events for it:
 Hay dos eventos para eso:

 - `onload` --successful load,
 - `onerror` --anerroroccurred.
 - `onload` --cuando cargó exitosamente,
 - `onerror` --cuando unerrorha ocurrido.

 ##Loading a script
 ##Cargando un script

 Let's say we need to load a third-party script and call a function that resides there.
 Digamos que tenemos que cargar un script de terceros y llamar una función que se encuentra dentro.

 We can load it dynamically, like this:
 Podemos cargarlo dinámicamente de esta manera:

 ```js
 let script = document.createElement('script');
 let script = document.createElement("script");
 script.src = "my.js";

 document.head.append(script);
 ```

 ...But how to run the function that is declared inside thatscript?We need to wait until thescriptloads, and only then we can call it.
 ...pero ¿cómo podemos ejecutar la función que esta dentro delscript?Necesitamos esperar hasta que elscripthaya cargado, y solo después podemos llamarlo.

 ```smart
 For our ownscriptswe could use[JavaScript modules](info:modules)here, but they are not widely adopted by third-party libraries.
 Para nuestrosscriptspodemos usar[JavaScript modules](info:modules)aquí, pero no está adoptado ampliamente por bibliotecas de terceros.
 ```

 ### script.onload

 The main helper is the`load`event. It triggers after the scriptwas loaded and executed.
 El evento`load`se dispara después de que scriptsea cargado y ejecutado.

 For instance:
 Por ejemplo:

 ```js run untrusted
 let script = document.createElement('script');

 //can load any script, from any domain
 //podemos cargar cualquier script desde cualquier dominio
 script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"
 document.head.append(script);

 *!*
 script.onload = function() {
  //the scriptcreates a helper function "_"
  alert(_); //the function is available
  //el scriptcrea una función de ayuda "_"
  alert(_); //la función está disponible
 };
 */!*
 ```

 So in `onload`we can use scriptvariables,run functions etc.
 Entonces en `onload`podemos usarvariables,ejecutar funciones, etc.

 ...And what if the loading failed? For instance, there'snosuchscript (error 404)or the server is down (unavailable).
 ...¿y si la carga falla? Por ejemplo:nohay talscript (error 404)en el servidor o el servidor está caído (no diponible).

 ### script.onerror

 Errors that occur during the loading of thescriptcan be tracked in an`error` event.
 Los errores que ocurren durante la carga de unscriptpueden ser rastreados en el evento`error`.

 For instance, let's request ascriptthat doesn't exist:
 Por ejemplo, hagamos una petición a unscriptque no existe:

 ```js run
 let script = document.createElement('script');
 script.src = "https://example.com/404.js"; // nosuch script
 script.src = "https://example.com/404.js"; // nohay tal script
 document.head.append(script);

 *!*
 script.onerror = function() {
  alert("Errorloading" + this.src); // Errorloading https://example.com/404.js
  alert("Erroral cargar" + this.src); // Erroral cargar https://example.com/404.js
 };
 */!*
 ```

 Please note that we can't get HTTPerrordetails here. We don't know ifit was anerror 404or 500 or something else. Just that the loading failed.
 Por favor nota que como no podemos obtener detalles delerrorHTTP aquí, no podemos saber iffue unerror 404o algo diferente. Solo el error de carga.

 ```warn
 Events`onload`/`onerror`track only the loading itself.
 Los eventos`onload/onerror`rastrean solamente la carga de ellos mismos.

 Errors that may occur during script processing and execution are out of scope for these events. That is: if a scriptloaded successfully, then `onload` triggers, even if it has programming errors in it. To trackscripterrors, one can use`window.onerror` global handler.
 Los errores que pueden ocurrir durante el procesamiento y ejecución están fuera del alcance para esos eventos. Eso es: si un scriptes cargado de manera exitosa, incluso si tiene errores de programación adentro, el evento `onload` se dispara. Para rastrear los errores delscriptun puede usar el manejador global`window.onerror`;
 ```

 ##Other resources
 ##Otros recursos

 The`load`and `error`events also work for other resources, basically for any resource that has an external`src`.
 Los eventos`load`y `error`también funcionan para otros recursos, básicamente para cualquiera que tenga una`src` externa.

 For example:
 Por ejemplo:

 ```js run
 let img = document.createElement('img');
 let img = document.createElement("img");
 img.src = "https://js.cx/clipart/train.gif"; // (*)

 img.onload = function() {
 img.onload = function() {
  alert(`Image loaded, size ${img.width}x${img.height}`);
 };

 img.onerror = function() {
 img.onerror = function() {
  alert("Error occurred while loading image");
 };
 ```

 There are some notes though:
 Sin embargo, hay algunas notas:

 -Most resources start loading when they are added to the document. But `<img>`is an exception. It starts loading when it gets asrc `(*)`.
 -For `<iframe>`,the`iframe.onload`event triggers when the iframeloading finished, both for successful load and in case of an error.
 -La mayoría de recursos empiezan a cargarse cuando son agregados al documento. Pero `<img>`es una excepción, comienza la carga cuando obtiene una fuente ".src" `(*)`.
 -Para `<iframe>`,el evento`iframe.onload`se dispara cuando el iframeha terminado de cargar, tanto para una carga exitosa como en caso de un error.

 That's for historical reasons.
 Esto es por razones históricas.

 ##Crossorigin policy
 ##Política de origen cruzado

 There's a rule:scriptsfrom one site can't access contents of the other site. So, e.g. a scriptat `https://facebook.com`can't read the user's mailbox at `https://gmail.com`.
 Hay una regla: losscriptsde un sitio no pueden acceder al contenido de otro sitio. Por ejemplo: un scriptde `https://facebook.com`no puede leer la bandeja de correos del usuario en `https://gmail.com`.

 Or, to be more precise, one origin (domain/port/protocol triplet) can't access the content from another one. So even if we have a subdomain, or just another port, these are different origins with no access to each other.
 O para ser más precisos, un origen (el trío dominio/puerto/protocolo) no puede acceder al contenido de otro. Entonces, incluso si tenemos un sub-dominio o solo un puerto distinto, son considerados origenes diferentes sin acceso al otro.

 This rule also affects resources from other domains.
 Esta regla también afecta a recursos de otros dominios.

 If we're using ascriptfrom another domain, and there's an error in it, we can't get error details.
 Si usamos unscriptde otro dominio y tiene un error, no podemos obtener detalles del error.

 For example, let's take ascript `error.js`that consists of a single (bad) function call:
 Por ejemplo, tomemos unscript `error.js`que consta de un única llamada a una función (con errores).
 ```js
 // 📁 error.js
 noSuchFunction();
 ```

 Now load it from the same site where it's located:
 Ahora cargalo desde el mismo sitio donde esta alojado:

 ```html run height=0
 <script>
 window.onerror = function(message, url, line, col, errorObj) {
  alert(`${message}\n${url}, ${line}:${col}`);
 };
 window.onerror = function(message, url, line, col, errorObj) {
 alert(`${message}\n${url}, ${line}:${col}`);
 };
 </script>
 <script src="/article/onload-onerror/crossorigin/error.js"></script>
 ```

 We can see a good error report, like this:
 Podemos ver un buen reporte de error, como este:

 ```
 Uncaught ReferenceError: noSuchFunction is not defined
 https://javascript.info/article/onload-onerror/crossorigin/error.js, 1:1
 ```

 Now let's load the samescriptfrom another domain:
 Ahora carguemos el mismoscriptdesde otro dominio:

 ```html run height=0
 <script>
 window.onerror = function(message, url, line, col, errorObj) {
  alert(`${message}\n${url}, ${line}:${col}`);
 };
 window.onerror = function(message, url, line, col, errorObj) {
 alert(`${message}\n${url}, ${line}:${col}`);
 };
 </script>
 <script src="https://cors.javascript.info/article/onload-onerror/crossorigin/error.js"></script>
 ```

 The report is different, like this:
 El reporte es diferente, como este:

 ```
 Script error.
 , 0:0
 ```

 Details may vary depending on the browser, but the ideais the same: any information about the internals of ascript,including error stack traces, is hidden. Exactly because it's from another domain.
 Los detalles pueden variar dependiendo del navegador, pero la ideaes la misma: cualquier información sobre las partes internas de unscript,incluyendo el rastreo de la pila de errores, se oculta. Exactamente porque es de otro dominio.

 Why do we need error details?
 ¿Por qué necesitamos detalles de error?

 There are many services (and we can build our own) that listen for global errors using `window.onerror`,save errors and provide an interface to access and analyze them. That's great, as we can see real errors, triggered by our users. But if a scriptcomes from another origin, then there's not much information about errors in it, as we've just seen.
 Hay muchos servicios (y podemos construir uno nuestro) que escuchan los errores globales usando `window.onerror`,guardan los errores y proveen una interfaz para acceder a ellos y analizarlos. Eso es grandioso ya que podemos ver los errores originales ocasionados por nuestros usuarios. Pero si el scriptviene desde otro origen no hay mucha información sobre los errores como acabamos de ver.

 Similar cross-origin policy (CORS) is enforced for other types of resources as well.
 También se aplican políticas similares de origen cruzado (CORS) a otros tipos de recursos.

 **To allow cross-origin access, the`<script>`tag needs to have the`crossorigin` attribute, plus the remote server must provide special headers.**
 **Para permitir el accesso de origen cruzado, la etiqueta`<script>`necesita tener el atributo`crossorigin`, además el servidor remoto debe proporcionar cabeceras especiales.**

 There are three levels of cross-origin access:
 Hay 3 niveles de acceso de origen cruzado:

 1. **No`crossorigin` attribute** --access prohibited.
 2. **`crossorigin="anonymous"`** --access allowed if the server responds with the header `Access-Control-Allow-Origin`with `*`or our origin. Browser does not send authorization information andcookiesto remote server.
 3. **`crossorigin="use-credentials"`** --access allowed if the server sends back the header`Access-Control-Allow-Origin`with our origin and `Access-Control-Allow-Credentials: true`.Browser sends authorization information andcookiesto remote server.
 1. **Sin el atributo`crossorigin`** --acceso prohibido.
 2. **`crossorigin="anonymous"`** --acceso permitido si el servidor responde con la cabecera `Access-Control-Allow-Origin`con `*`o nuestro origen. El navegador no envía la información de la autorización ycookiesal servidor remoto.
 3. **`crossorigin="use-credentials"`** --acceso permitido si el servidor envia de vuelta la cabecera`Access-Control-Allow-Origin`con nuestro origen y `Access-Control-Allow-Credentials: true`.El navegador envía la información de la autorización y lascookiesal servidor remoto.

 ```smart
 You can read more about cross-origin access in the chapter<info:fetch-crossorigin>.It describes the`fetch`method for network requests, but the policy is exactly the same.
 Puedes leer más sobre accesos de origen cruzado  en el capítulo<info:fetch-crossorigin>.Este describe el método`fetch`para requerimientos de red, pero la política es exactamente la misma.

 Such thing as "cookies"is out of our current scope, but you can read about them in the chapter <info:cookie>.
 Cosas como las "cookies"estan fuera de nuestro alcance, pero podemos leer sobre ellas en <info:cookie>.
 ```

 In our case, we didn't have any crossorigin attribute. So thecross-origin access was prohibited. Let's add it.
 En nuetro caso no teníamos ningún atributo de origen cruzado (`cross-origin`). Por lo que se prohibió el acceso de origen cruzado. Vamos a agregarlo.

 We can choose between`"anonymous"` (nocookies sent, one server-side header needed) and `"use-credentials"` (sends cookies too, two server-side headers needed).
 Podemos elegir entre`"anonymous"` (nose envian las cookies, una sola cabecera esa necesaria en el lado del servidor) y `"use-credentials"` (envias las cookies, dos cabeceras son necesarias en el lado del servidor).

 If we don't care aboutcookies, then `"anonymous"`is the way to go:
 Si no nos importan las `cookies`, entonces `"anonymous"`es el camino a seguir:

 ```html run height=0
 <script>
 <script *!*crossorigin="anonymous"*/!* src="https://cors.javascript.info/article/onload-onerror/crossorigin/error.js"></script>
 ```

 Now, assuming that the server provides an`Access-Control-Allow-Origin` header, everything's fine. We have the full error report.
 Ahora, asumiendo que el servidor brinda una cabecera`Access-Control-Allow-Origin`, todo está bien. Podemos tener el reporte completo del error.

 ##Summary
 ##Resumen

 Images`<img>`,external styles, scriptsand other resources provide`load`and `error`events to track their loading:
 Las imágenes`<img>`,estilos externos, scriptsy otros recursos proveen los eventos`load`y `error`para rastrear sus cargas:

 - `load`triggers on a successful load,
 - `error`triggers on a failed load.
 - `load`se ejecuta cuando la carga ha sido exitosa,
 - `error`se ejecuta cuando una carga ha fallado.

 The only exception is`<iframe>`:for historical reasons it always triggers`load`,for any load completion, even if the page is not found.
 La única excepción es el`<iframe>`:por razones históricas siempre dispara el evento`load`,incluso si no encontró la página.

 The`readystatechange`event also works for resources, but is rarely used, because`load/error`events are simpler.
 El evento`readystatechange`también funciona para recursos, pero es muy poco usado debido a que los eventos`load/error`son mas simples.
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@

		The algorithm:
		1.Make`img`for every source.
		2.Add`onload/onerror`for every image.
		3.Increase the counter when either`onload`or`onerror`triggers.
		4.When the counter value equals to the sources count -- we're done: `callback()`.
		El algoritmo:
		1.Crear una`img`para cada fuente.
		2.Agregar los eventos`onload/onerror`para cada imágen.
		3.Incrementar el contador cuando el evento`onload`o el evento`onerror`se dispare.
		4.Cuando el valor del contador es igual a la cantidad de fuentes, hemos terminado: `callback()`.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,35 +2,35 @@ importance: 4

		---

		#Load images with acallback
		#Cargando imágenes con una un función de retorno (`callback`)

		Normally, images are loaded when they are created. So when we add `<img>`to the page, the user does not see the picture immediately. The browser needs to load it first.
		Normalmente, las imágenes son cargadas cuando son creadas. Entonces, cuando nosotros agregamos `<img>`a la página el usuario no ve la imágen inmediatamente. El navegador necesita cargarlo primero.

		To show an image immediately, we can create it "in advance",like this:
		Para mostrar una imágen inmediatamente, podemos crearlo "en avance",como esto:

		```js
		let img = document.createElement('img');
		img.src = 'my.jpg';
		```

		The browser starts loading the image and remembers it in thecache.Later, when the same image appears in the document (nomatter how), it shows up immediately.
		El navegador comienza a cargar la imágen y lo guarda en elcache.Después cuando la misma imágen aparece en el documento (noimporta cómo) la muestra inmediatamente.

		Create a function `preloadImages(sources, callback)`that loads all images from the array`sources` and, when ready, runs`callback`.
		Crear una función `preloadImages(sources, callback)`que cargue todas las imágenes desde una lista de fuentes (`sources`) y, cuando esten listas, ejecutar la función de retorno (`callback`).

		For instance, this will show an`alert` after the images are loaded:
		Por ejemplo: esto puede mostrar una alerta (`alert`) después de que la imágen sea cargada:

		```js
		function loaded() {
		alert("Images loaded")
		alert("Imágenes cargadas")
		}

		preloadImages(["1.jpg", "2.jpg", "3.jpg"], loaded);
		```

		In case of an error,the function should still assume the picture "loaded".
		En caso de un error,la función debería seguir asumiendo que la imágen ha sido "cargada".

		In other words, the`callback` is executed when all images are either loaded or errored out.
		En otras palabras, la función de retorno (`callback`) es ejecutada cuando todas las imágenes han sido cargadas o no.

		The function is useful, for instance, when we plan to show a gallery with many scrollable images, and want to be sure that all images are loaded.
		La función es útil, por ejemplo, cuando planeamos mostrar una galería con muchas imágenes desplazables y estar seguros que todas las imágenes estan cargadas.

		In the source document you can find links to test images, and also the code to check whether they are loaded or not. It should output `300`.
		En el documento fuente puedes encontrar enlaces para probar imágenes y también el codigo para verificar si han sido cargadas o no. Debería devolver `300`.
Original file line number	Diff line number	Diff line change
		@@ -1,187 +1,187 @@
		#Resource loading: onloadand onerror
		#Carga de recursos: onloady onerror

		The browser allows us to track the loading of external resources -- scripts, iframes,pictures and so on.
		El navegador nos permite hacer seguimiento de la carga de recursos externos: scripts, iframes,imagenes y más.

		There are two events for it:
		Hay dos eventos para eso:

		- `onload` --successful load,
		- `onerror` --anerroroccurred.
		- `onload` --cuando cargó exitosamente,
		- `onerror` --cuando unerrorha ocurrido.

		##Loading a script
		##Cargando un script

		Let's say we need to load a third-party script and call a function that resides there.
		Digamos que tenemos que cargar un script de terceros y llamar una función que se encuentra dentro.

		We can load it dynamically, like this:
		Podemos cargarlo dinámicamente de esta manera:

		```js
		let script = document.createElement('script');
		let script = document.createElement("script");
dbritto-dev marked this conversation as resolved. Show resolvedHide resolved
		script.src = "my.js";

		document.head.append(script);
		```

		...But how to run the function that is declared inside thatscript?We need to wait until thescriptloads, and only then we can call it.
		...pero ¿cómo podemos ejecutar la función que esta dentro delscript?Necesitamos esperar hasta que elscripthaya cargado, y solo después podemos llamarlo.

		```smart
		For our ownscriptswe could use[JavaScript modules](info:modules)here, but they are not widely adopted by third-party libraries.
		Para nuestrosscriptspodemos usar[JavaScript modules](info:modules)aquí, pero no está adoptado ampliamente por bibliotecas de terceros.
		```

		### script.onload

		The main helper is the`load`event. It triggers after the scriptwas loaded and executed.
		El evento`load`se dispara después de que scriptsea cargado y ejecutado.

		For instance:
		Por ejemplo:

		```js run untrusted
		let script = document.createElement('script');

		//can load any script, from any domain
		//podemos cargar cualquier script desde cualquier dominio
		script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"
		document.head.append(script);

		!
		script.onload = function() {
		//the scriptcreates a helper function "_"
		alert(_); //the function is available
		//el scriptcrea una función de ayuda "_"
		alert(_); //la función está disponible
		};
		/!
		```

		So in `onload`we can use scriptvariables,run functions etc.
		Entonces en `onload`podemos usarvariables,ejecutar funciones, etc.

		...And what if the loading failed? For instance, there'snosuchscript (error 404)or the server is down (unavailable).
		...¿y si la carga falla? Por ejemplo:nohay talscript (error 404)en el servidor o el servidor está caído (no diponible).

		### script.onerror

		Errors that occur during the loading of thescriptcan be tracked in an`error` event.
		Los errores que ocurren durante la carga de unscriptpueden ser rastreados en el evento`error`.

		For instance, let's request ascriptthat doesn't exist:
		Por ejemplo, hagamos una petición a unscriptque no existe:

		```js run
		let script = document.createElement('script');
		script.src = "https://example.com/404.js"; // nosuch script
		script.src = "https://example.com/404.js"; // nohay tal script
		document.head.append(script);

		!
		script.onerror = function() {
		alert("Errorloading" + this.src); // Errorloading https://example.com/404.js
		alert("Erroral cargar" + this.src); // Erroral cargar https://example.com/404.js
		};
		/!
		```

		Please note that we can't get HTTPerrordetails here. We don't know ifit was anerror 404or 500 or something else. Just that the loading failed.
		Por favor nota que como no podemos obtener detalles delerrorHTTP aquí, no podemos saber iffue unerror 404o algo diferente. Solo el error de carga.

		```warn
		Events`onload`/`onerror`track only the loading itself.
		Los eventos`onload/onerror`rastrean solamente la carga de ellos mismos.

		Errors that may occur during script processing and execution are out of scope for these events. That is: if a scriptloaded successfully, then `onload` triggers, even if it has programming errors in it. To trackscripterrors, one can use`window.onerror` global handler.
		Los errores que pueden ocurrir durante el procesamiento y ejecución están fuera del alcance para esos eventos. Eso es: si un scriptes cargado de manera exitosa, incluso si tiene errores de programación adentro, el evento `onload` se dispara. Para rastrear los errores delscriptun puede usar el manejador global`window.onerror`;
		```

		##Other resources
		##Otros recursos

		The`load`and `error`events also work for other resources, basically for any resource that has an external`src`.
		Los eventos`load`y `error`también funcionan para otros recursos, básicamente para cualquiera que tenga una`src` externa.

		For example:
		Por ejemplo:

		```js run
		let img = document.createElement('img');
		let img = document.createElement("img");
		img.src = "https://js.cx/clipart/train.gif"; // (*)

		img.onload = function() {
		img.onload = function() {
		alert(`Image loaded, size ${img.width}x${img.height}`);
		};

		img.onerror = function() {
		img.onerror = function() {
		alert("Error occurred while loading image");
		};
		```

		There are some notes though:
		Sin embargo, hay algunas notas:

		-Most resources start loading when they are added to the document. But `<img>`is an exception. It starts loading when it gets asrc `(*)`.
		-For `<iframe>`,the`iframe.onload`event triggers when the iframeloading finished, both for successful load and in case of an error.
		-La mayoría de recursos empiezan a cargarse cuando son agregados al documento. Pero `<img>`es una excepción, comienza la carga cuando obtiene una fuente ".src" `(*)`.
		-Para `<iframe>`,el evento`iframe.onload`se dispara cuando el iframeha terminado de cargar, tanto para una carga exitosa como en caso de un error.

		That's for historical reasons.
		Esto es por razones históricas.

		##Crossorigin policy
		##Política de origen cruzado

		There's a rule:scriptsfrom one site can't access contents of the other site. So, e.g. a scriptat `https://facebook.com`can't read the user's mailbox at `https://gmail.com`.
		Hay una regla: losscriptsde un sitio no pueden acceder al contenido de otro sitio. Por ejemplo: un scriptde `https://facebook.com`no puede leer la bandeja de correos del usuario en `https://gmail.com`.

		Or, to be more precise, one origin (domain/port/protocol triplet) can't access the content from another one. So even if we have a subdomain, or just another port, these are different origins with no access to each other.
		O para ser más precisos, un origen (el trío dominio/puerto/protocolo) no puede acceder al contenido de otro. Entonces, incluso si tenemos un sub-dominio o solo un puerto distinto, son considerados origenes diferentes sin acceso al otro.

		This rule also affects resources from other domains.
		Esta regla también afecta a recursos de otros dominios.

		If we're using ascriptfrom another domain, and there's an error in it, we can't get error details.
		Si usamos unscriptde otro dominio y tiene un error, no podemos obtener detalles del error.

		For example, let's take ascript `error.js`that consists of a single (bad) function call:
		Por ejemplo, tomemos unscript `error.js`que consta de un única llamada a una función (con errores).
		```js
		// 📁 error.js
		noSuchFunction();
		```

		Now load it from the same site where it's located:
		Ahora cargalo desde el mismo sitio donde esta alojado:

		```html run height=0
		<script>
		window.onerror = function(message, url, line, col, errorObj) {
		alert(`${message}\n${url}, ${line}:${col}`);
		};
		window.onerror = function(message, url, line, col, errorObj) {
		alert(`${message}\n${url}, ${line}:${col}`);
		};
		</script>
		<script src="/article/onload-onerror/crossorigin/error.js"></script>
		```

		We can see a good error report, like this:
		Podemos ver un buen reporte de error, como este:

		```
		Uncaught ReferenceError: noSuchFunction is not defined
		https://javascript.info/article/onload-onerror/crossorigin/error.js, 1:1
		```

		Now let's load the samescriptfrom another domain:
		Ahora carguemos el mismoscriptdesde otro dominio:

		```html run height=0
		<script>
		window.onerror = function(message, url, line, col, errorObj) {
		alert(`${message}\n${url}, ${line}:${col}`);
		};
		window.onerror = function(message, url, line, col, errorObj) {
		alert(`${message}\n${url}, ${line}:${col}`);
		};
		</script>
		<script src="https://cors.javascript.info/article/onload-onerror/crossorigin/error.js"></script>
		```

		The report is different, like this:
		El reporte es diferente, como este:

		```
		Script error.
		, 0:0
		```

		Details may vary depending on the browser, but the ideais the same: any information about the internals of ascript,including error stack traces, is hidden. Exactly because it's from another domain.
		Los detalles pueden variar dependiendo del navegador, pero la ideaes la misma: cualquier información sobre las partes internas de unscript,incluyendo el rastreo de la pila de errores, se oculta. Exactamente porque es de otro dominio.

		Why do we need error details?
		¿Por qué necesitamos detalles de error?

		There are many services (and we can build our own) that listen for global errors using `window.onerror`,save errors and provide an interface to access and analyze them. That's great, as we can see real errors, triggered by our users. But if a scriptcomes from another origin, then there's not much information about errors in it, as we've just seen.
		Hay muchos servicios (y podemos construir uno nuestro) que escuchan los errores globales usando `window.onerror`,guardan los errores y proveen una interfaz para acceder a ellos y analizarlos. Eso es grandioso ya que podemos ver los errores originales ocasionados por nuestros usuarios. Pero si el scriptviene desde otro origen no hay mucha información sobre los errores como acabamos de ver.

		Similar cross-origin policy (CORS) is enforced for other types of resources as well.
		También se aplican políticas similares de origen cruzado (CORS) a otros tipos de recursos.

		To allow cross-origin access, the`<script>`tag needs to have the`crossorigin` attribute, plus the remote server must provide special headers.
		Para permitir el accesso de origen cruzado, la etiqueta`<script>`necesita tener el atributo`crossorigin`, además el servidor remoto debe proporcionar cabeceras especiales.

		There are three levels of cross-origin access:
		Hay 3 niveles de acceso de origen cruzado:

		1. No`crossorigin` attribute --access prohibited.
		2. `crossorigin="anonymous"` --access allowed if the server responds with the header `Access-Control-Allow-Origin`with `*`or our origin. Browser does not send authorization information andcookiesto remote server.
		3. `crossorigin="use-credentials"` --access allowed if the server sends back the header`Access-Control-Allow-Origin`with our origin and `Access-Control-Allow-Credentials: true`.Browser sends authorization information andcookiesto remote server.
		1. Sin el atributo`crossorigin` --acceso prohibido.
		2. `crossorigin="anonymous"` --acceso permitido si el servidor responde con la cabecera `Access-Control-Allow-Origin`con `*`o nuestro origen. El navegador no envía la información de la autorización ycookiesal servidor remoto.
		3. `crossorigin="use-credentials"` --acceso permitido si el servidor envia de vuelta la cabecera`Access-Control-Allow-Origin`con nuestro origen y `Access-Control-Allow-Credentials: true`.El navegador envía la información de la autorización y lascookiesal servidor remoto.

		```smart
		You can read more about cross-origin access in the chapter<info:fetch-crossorigin>.It describes the`fetch`method for network requests, but the policy is exactly the same.
		Puedes leer más sobre accesos de origen cruzado en el capítulo<info:fetch-crossorigin>.Este describe el método`fetch`para requerimientos de red, pero la política es exactamente la misma.

		Such thing as "cookies"is out of our current scope, but you can read about them in the chapter <info:cookie>.
		Cosas como las "cookies"estan fuera de nuestro alcance, pero podemos leer sobre ellas en <info:cookie>.
		```

		In our case, we didn't have any crossorigin attribute. So thecross-origin access was prohibited. Let's add it.
		En nuetro caso no teníamos ningún atributo de origen cruzado (`cross-origin`). Por lo que se prohibió el acceso de origen cruzado. Vamos a agregarlo.

		We can choose between`"anonymous"` (nocookies sent, one server-side header needed) and `"use-credentials"` (sends cookies too, two server-side headers needed).
		Podemos elegir entre`"anonymous"` (nose envian las cookies, una sola cabecera esa necesaria en el lado del servidor) y `"use-credentials"` (envias las cookies, dos cabeceras son necesarias en el lado del servidor).
dbritto-dev marked this conversation as resolved. Show resolvedHide resolved

		If we don't care aboutcookies, then `"anonymous"`is the way to go:
		Si no nos importan las `cookies`, entonces `"anonymous"`es el camino a seguir:

		```html run height=0
		<script>
Expand All		@@ -192,15 +192,15 @@ window.onerror = function(message, url, line, col, errorObj) {
		<script !crossorigin="anonymous"/! src="https://cors.javascript.info/article/onload-onerror/crossorigin/error.js"></script>
		```

		Now, assuming that the server provides an`Access-Control-Allow-Origin` header, everything's fine. We have the full error report.
		Ahora, asumiendo que el servidor brinda una cabecera`Access-Control-Allow-Origin`, todo está bien. Podemos tener el reporte completo del error.

		##Summary
		##Resumen

		Images`<img>`,external styles, scriptsand other resources provide`load`and `error`events to track their loading:
		Las imágenes`<img>`,estilos externos, scriptsy otros recursos proveen los eventos`load`y `error`para rastrear sus cargas:

		- `load`triggers on a successful load,
		- `error`triggers on a failed load.
		- `load`se ejecuta cuando la carga ha sido exitosa,
		- `error`se ejecuta cuando una carga ha fallado.

		The only exception is`<iframe>`:for historical reasons it always triggers`load`,for any load completion, even if the page is not found.
		La única excepción es el`<iframe>`:por razones históricas siempre dispara el evento`load`,incluso si no encontró la página.

		The`readystatechange`event also works for resources, but is rarely used, because`load/error`events are simpler.
		El evento`readystatechange`también funciona para recursos, pero es muy poco usado debido a que los eventos`load/error`son mas simples.