Come rilevare la perdita di rete in Javascript?

Question

La mia applicazione web funziona su più dispositivi portatili come iPad schede Galaxy ecc immagini richiesta di applicazione dal server e rendere in sui client.

Ora il problema è a volte accade, che la connettività di rete viene persa durante il rendering di immagini, oltre che il tempo che HTML non-immagine icona viene visualizzata sui dispositivi ...

voglio gestire questa situazione con garbo, al momento della perdita di rete, voglio catturare quella e mostrare un avviso all'utente che nessuna connettività di rete o qualcosa ...

Ho provato a utente navigator.onLine evento .. ma non funziona su tutti i set di browser sono sostenere come, 5-6 versione su Mozilla ecc

E anche il mio applicazione funziona solo su rete locale wi-fi ... può o non può essere collegato ad internet .. sarà in quel suitation Anche questa navigator.onLine opere ..?

Si prega di fornire me qualsiasi altro modo migliore per fare questo ...

Answer 1

si potrebbe fare un po 'di richiesta XHR al server e controllare lo stato restituito.

Se è 0, questo significa the connection is missing.

Quindi, qualcosa di simile potrebbe dare un po 'di funzione di utilità:

function isOnline (callback) { 
    var xhr = new XMLHttpRequest() 
    xhr.onreadystatechange = function () { 
     // Make sure the request is finished 
     if (xhr.readyState === 4) { 
      // There is the magic 
      if (xhr.status === 0) { 
       callback(false) 
      } 
      else { 
       callback(true) 
      } 
     } 
    } 
    xhr.open('/some/url') 
    xhr.send() 
} 

// Usage example: 
isOnline(function (status) { 
    if (status) { 
     // You're online 
    } 
    else { 
     // You're not online 
    } 
}) 

PS: Ho saltato la parte IE rispetto per l'oggetto xhr, ma sarebbe facile aggiungere. Questo è più per avere l'idea.

Answer 2

Ad esempio, è possibile utilizzare

<img src="..." onerror="noConnection()"> 

Così metodo noConnection saranno chiamati se un'immagine non è stato caricato.

Maggiori informazioni qui: jQuery/JavaScript to replace broken images