Merge pull request #82 from simoneP93/resourceLoading

onload/onerror

Author: longo-andrea

2-ui/5-loading/03-onload-onerror/1-load-img-callback/solution.md

@@ -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()`.
+L'algoritmo:
+1. Fare un `img` per ogni sorgente.
+2. Aggiungere `onload/onerror` ad ogni immagine.
+3. Incrementa il contatore quando si aziona `onload` o `onerror`.
+4. Quando il valore del contatore è uguale al numero delle sorgenti abbiamo finito: `callback()`.

2-ui/5-loading/03-onload-onerror/1-load-img-callback/task.md

@@ -2,22 +2,22 @@ importance: 4
 
 ---
 
-# Load images with a callback
+# Caricare immagini con una 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, le immagini vengono caricate quando sono create. Quindi quando aggiungiamo `<img>` alla pagina, l'utente non vede l'immagine immediatamente. Il Browser deve prima caricarla.
 
-To show an image immediately, we can create it "in advance", like this:
+Per visualizzare un'immagine immediatamente dobbiamo crearla "in anticipo", come in questo caso:
 
 ```js
 let img = document.createElement('img');
 img.src = 'my.jpg';
 ```
 
-The browser starts loading the image and remembers it in the cache. Later, when the same image appears in the document (no matter how), it shows up immediately.
+Il browser inizia a caricare l'immagine e la salva nella cache. In seguito, quando la stessa immagine comparirà nel document, si visualizzerà immediatamente.
 
-**Create a function `preloadImages(sources, callback)` that loads all images from the array `sources` and, when ready, runs `callback`.**
+**Crea una funzione `preloadImages(sources, callback)` che carica tutte le immagini da un array `sources` e, quando pronte, esegue `callback`.**
 
-For instance, this will show an `alert` after the images are loaded:
+Per esempio, questo pezzo di codice visualizzerà un `alert` dopo che le immagini sono caricate:
 
 ```js
 function loaded() {
@@ -27,10 +27,10 @@ function loaded() {
 preloadImages(["1.jpg", "2.jpg", "3.jpg"], loaded);
 ```
 
-In case of an error, the function should still assume the picture "loaded".
+In caso di errore la funzione dovrebbe comunque considerare l'immagine "caricata"
 
-In other words, the `callback` is executed when all images are either loaded or errored out.
+In altre parole, la funzione di `callback` è eseguita quando tutte le immagini sono caricate o sono andate in errore.
 
-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 funzione, ad esempio, è utile quando dobbiamo mostrare una galleria scrollabile di immagini e vogliamo essere sicuri che tutte le immagini siano caricate.
 
-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`.
+Nel documento sorgente puoi trovare i link alle immagini di test ed anche il codice per verificare se le immagini sono state caricate o meno. L'output dovrebbe essere `300`.

2-ui/5-loading/03-onload-onerror/article.md

@@ -1,17 +1,17 @@
-# Resource loading: onload and onerror
+# Caricamento delle risorse: onload e onerror
 
-The browser allows to track the loading of external resources -- scripts, iframes, pictures and so on.
+Il browser permette di tracciare il caricamente di risorse esterne -- script, iframe, immagini e così via.
 
-There are two events for it:
+Esistono 2 eventi per tracciare il caricamento:
 
-- `onload` -- successful load,
-- `onerror` -- an error occurred.
+- `onload` -- caricato con success,
+- `onerror` -- si è verificato un errore.
 
-## Loading a script
+## Caricamento di uno script
 
-Let's say we need to load a third-party script and call a function that resides there.
+Diciamo che abbiamo necessità di caricare uno script di terze parti e chiamare una funzione che appartiene a questo script.
 
-We can load it dynamically, like this:
+Possiamo caricarlo dinamicamente, in questo modo:
 
 ```js
 let script = document.createElement('script');
@@ -20,106 +20,106 @@ script.src = "my.js";
 document.head.append(script);
 ```
 
-...But how to run the function that is declared inside that script? We need to wait until the script loads, and only then we can call it.
+...Ma come possiamo eseguire la funzione dichiarata all'interno di quello script? Dobbiamo attendere finchè lo script sia caricato e solo allora possiamo chiamare la funzione. 
 
 ```smart
-For our own scripts we could use [JavaScript modules](info:modules) here, but they are not widely adopted by third-party libraries.
+Per i nostri script dovremmo utilizzare i [moduli JavaScript](info:modules) in questo caso, ma non sono largamente adottati dalle librerie di terze parti.
 ```
 
 ### script.onload
 
-The main helper is the `load` event. It triggers after the script was loaded and executed.
+Il principale helper è l'evento `load`. Si innesca dopo che lo script è stato caricato ed eseguito. 
 
-For instance:
+Per esempio:
 
 ```js run untrusted
 let script = document.createElement('script');
 
-// can load any script, from any domain
+// si può caricare qualunque script, da qualunque dominio
 script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"
 document.head.append(script);
 
 *!*
 script.onload = function() {
-  // the script creates a helper function "_"
-  alert(_); // the function is available
+  // lo script crea una funzione helper "_"
+  alert(_); // la funzione è disponibile
 };
 */!*
 ```
 
-So in `onload` we can use script variables, run functions etc.
+Quindi nell'evento `onload` possiamo utilizzare le variabili dello script, eseguire funzioni, ecc.
 
-...And what if the loading failed? For instance, there's no such script (error 404) or the server or the server is down (unavailable).
+...E cosa accade se il caricamento fallisce? Per esempio, quello script non esiste sul server (errore 404) o il server è fuori servizio (non disponibile).
 
 ### script.onerror
 
-Errors that occur during the loading of the script can be tracked on `error` event.
+Gli errori che si verificano durante il caricamento dello script possono essere tracciati tramite l'evento `error`.
 
-For instance, let's request a script that doesn't exist:
+Per esempio, proviamo a richiedere uno script che non esiste:
 
 ```js run
 let script = document.createElement('script');
-script.src = "https://example.com/404.js"; // no such script
+script.src = "https://example.com/404.js"; // script che non esiste
 document.head.append(script);
 
 *!*
 script.onerror = function() {
-  alert("Error loading " + this.src); // Error loading https://example.com/404.js
+  alert("Caricamento fallito " + this.src); // Error loading https://example.com/404.js
 };
 */!*
 ```
 
-Please note that we can't get HTTP error details here. We don't know was it error 404 or 500 or something else. Just that the loading failed.
+Notate bene che in questo punto non possiamo ottenere i dettagli dell'errore HTTP. Non sappiamo se è un errore 404 o 500 o qualcos'altro.
 
 ```warn
-Events `onload`/`onerror` track only the loading itself.
+Gli eventi `onload`/`onerror` tracciano solo il caricamento stesso.
 
-Errors during script processing and execution are out of the scope of these events. To track script errors, one can use `window.onerror` global handler.
+Gli errori durante il processamento e l'esecuzione sono fuori dall'ambito di questi eventi. Per tracciare gli errori dello script si può utilizzare l'handler globale `window.onerror`.
 ```
 
-## Other resources
+## Altre risorse
 
-The `load` and `error` events also work for other resources, basically for any resource that has an external `src`.
+Gli eventi `load` e `error` funzionano anche per le altre risorse, praticamente per qualunque risorsa che ha un `src` esterno.
 
-For example:
+Per esempio:
 
 ```js run
 let img = document.createElement('img');
 img.src = "https://js.cx/clipart/train.gif"; // (*)
 
 img.onload = function() {
-  alert(`Image loaded, size ${img.width}x${img.height}`);
+  alert(`Immagine caricata, dimensione ${img.width}x${img.height}`);
 };
 
 img.onerror = function() {
-  alert("Error occurred while loading image");
+  alert("Si è verificato un errore durante il caricamento dell'immagine");
 };
 ```
 
-There are some notes though:
+Ci sono alcune note però:
 
-- Most resources start loading when they are added to the document. But `<img>` is an exception. It starts loading when it gets an src `(*)`.
-- For `<iframe>`, the `iframe.onload` event triggers when the iframe loading finished, both for successful load and in case of an error.
+- La maggior parte delle risorse inizia a caricarsi quando vengono aggiunte al document, ma `<img>` è un'eccezione. Inizia a caricarsi quando ottiene un src `(*)`.
+- Per gli `<iframe>`, l'evento `iframe.onload` si aziona quando il caricamento dell'iframe è terminato, sia in caso di successo che in caso di errore. 
 
-That's for historical reasons.
+Questo avviene per ragioni storiche.
 
 ## Crossorigin policy
 
-There's a rule: scripts from one site can't access contents of the other site. So, e.g. a script at `https://facebook.com` can't read the user's mailbox at `https://gmail.com`.
+C'è una regola: gli script di un sito non possono accedere ai contenuti di un altro sito. Quindi, per esempio, uno script di  `https://facebook.com` non può leggere la casella di posta dell'utente di `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, no access to each other.
+Per essere più precisi, un'origine (tripletta dominio/porta/protocollo) non può accedere al contenuto di un'altra. Quindi se abbiamo un sottodominio, o anche solo un'altra porta, questo sarà un'origine differente e quindi non hanno accesso l'uno con l'altro.
 
-This rule also affects resources from other domains.
+Questa regola interessa anche le risorse di altri domini.
 
-If we're using a script from another domain, and there's an error in it, we can't get error details.
+Se stiamo utilizzando uno script di un altro dominio e c'è un errore, non possiamo ottenere i dettagli di quell'errore.
 
-For example, let's take a script `error.js` that consists of a single (bad) function call:
+Per esempio, prendiamo lo script `error.js`, che consiste in una singola chiamata ad una funzione (sbagliata):
 ```js
 // 📁 error.js
 noSuchFunction();
 ```
 
-Now load it from the same site where it's located:
+Ora caricatela dallo stesso sito su cui è situato lo script:
 
 ```html run height=0
 <script>
@@ -130,14 +130,14 @@ window.onerror = function(message, url, line, col, errorObj) {
 <script src="/article/onload-onerror/crossorigin/error.js"></script>
 ```
 
-We can see a good error report, like this:
+Vedremo il report dell'errore, come questo:
 
 ```
 Uncaught ReferenceError: noSuchFunction is not defined
 https://javascript.info/article/onload-onerror/crossorigin/error.js, 1:1
 ```
 
-Now let's load the same script from another domain:
+Ora carichiamo lo stesso script da un altro dominio:
 
 ```html run height=0
 <script>
@@ -148,40 +148,40 @@ window.onerror = function(message, url, line, col, errorObj) {
 <script src="https://cors.javascript.info/article/onload-onerror/crossorigin/error.js"></script>
 ```
 
-The report is different, like this:
+Il report di errore è diverso rispetto a quello precedente, come questo:
 
 ```
 Script error.
 , 0:0
 ```
 
-Details may vary depending on the browser, but the idea is same: any information about the internals of a script, including error stack traces, is hidden. Exactly because it's from another domain.
+I dettagli potrebbero dipendere dal browser, ma l'idea è la stessa: qualunque informazione interno dello script, incluso lo stack trace dell'errore, è nascosta. Esattamente, perche lo script è di un altro dominio.
 
-Why do we need error details?
+Perchè abbiamo bisogno dei dettagli di errore?
 
-There are many services (and we can build our own) that listen to 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 script comes from another origin, then there's no much information about errors in it, as we've just seen.
+Ci sono molti servizi (e possiamo anche sviluppare il nostro) che stanno in ascolto sugli errori globali, utilizzando `window.onerror`, salvano gli errori e forniscono un interfaccia per accedere ed analizzarli. Fantastico, possiamo vedere i veri errori, scaturiti dai nostri utenti. Ma se uno script è caricato da un altro dominio non avremo nessuna informazioni sull'errore, come abbiamo appena visto.
 
-Similar cross-origin policy (CORS) is enforced for other types of resources as well.
+Una policy cross-origin (CORS) simile viene applicata anche per altri tipi di risorse. 
 
-**To allow cross-origin access, the `<script>` tag needs to have `crossorigin` attribute, plus the remote server must provide special headers.**
+**Per consentire l'accesso cross-origin il tag `<script>` deve avere l'attributo `crossorigin` e il server remoto deve fornire degli header speciali.**
 
-There are three levels of cross-origin access:
+Ci sono tre livelli di accesso cross-origin:
 
-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 and cookies to 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 and cookies to remote server.
+1. **Attributo `crossorigin` non presente** -- accesso vietato.
+2. **`crossorigin="anonymous"`** -- accesso consentito se il server risponde con l'header `Access-Control-Allow-Origin` con il valore `*` o il nome della nostra origin (dominio). Il browser non manda dati e cookie sull'autenticazione al server remoto.
+3. **`crossorigin="use-credentials"`** -- accesso consentito se il server manda indietro l'header `Access-Control-Allow-Origin` con la nostra origine (dominio) e `Access-Control-Allow-Credentials: true`. Il browser manda i dati e i cookie sull'autenticazione al server remoto.
 
 ```smart
-You can read more about cross-origin access in the chapter <info:fetch-crossorigin>. It describes `fetch` method for network requests, but the policy is exactly the same.
+Può approfondire l'accesso cross-origin nel capitolo <info:fetch-crossorigin>. Descrive il metodo `fetch` per le richieste di rete, ma la policy è esattamente la stessa.
 
-Such thing as "cookies" is out of our current scope, but you can read about them in the chapter <info:cookie>.
+Ad esempio i "cookies" sono un argomento fuori dal nostro attuale ambito, ma puoi leggere informazioni a proposito nel capitolo <info:cookie>.
 ```
 
-In our case, we didn't have any crossorigin attribute. So the cross-origin access was prohibited. Let's add it.
+Nel nostro caso non avevamo nessun attributo crossorigin, quindi l'accesso era vietato. Aggiungiamo l'attributo ora.
 
-We can choose between `"anonymous"` (no cookies sent, one server-side header needed) and `"use-credentials"` (sends cookies too, two server-side headers needed).
+Possiamo scegliere tra `"anonymous"` (non vengono mandati cookie, è necessario un header lato server) e `"use-credentials"` (manda i cookie, sono necessari 2 header lato server).
 
-If we don't care about cookies, then `"anonymous"` is a way to go:
+Se non ci interessano i cookie allora `"anonymous"` è la scelta giusta:
 
 ```html run height=0
 <script>
@@ -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 `Access-Control-Allow-Origin` header, everything's fine. We have the full error report.
+Ora, supponendo che il server fornisca l'header `Access-Control-Allow-Origin`, riusciamo ad avere il report completo dell'errore.
 
-## Summary
+## Riepilogo
 
-Images `<img>`, external styles, scripts and other resources provide `load` and `error` events to track their loading:
+Immagini `<img>`, fogli di stile esterni, script e altre risorse forniscono gli eventi `load` e `error` per tracciare i loro caricamento:
 
-- `load` triggers on a successful load,
-- `error` triggers on a failed load.
+- `load` si aziona se il caricamento va a buon fine,
+- `error` si azione se si verifica un errore durante il caricamento.
 
-The only exception is `<iframe>`: for historical reasons it always triggers `load`, for any load completion, even if the page is not found.
+L'unica eccezione è `<iframe>`: per ragioni storiche scatta sempre l'evento `load`, per qualunque esito del caricamento, anche se la pagina non è stata trovata.
 
-The `readystatechange` event also works for resources, but is rarely used, because `load/error` events are simpler.
+Possiamo monitorare il caricamento delle risorse anche tramite l'evento `readystatechange`, ma è poco utilizzato, perchè gli eventi `load/error` sono più semplici.