Jak wykryć utratę sieci w JavaScript?

Question

Moja aplikacja internetowa działa na wielu urządzeniach przenośnych, takich jak iPady, karty Galaxy itp. Żądania obrazów z serwera i renderowania na klientach.

Teraz problem jest czasami zdarza się, że połączenie sieciowe jest tracone podczas renderowania obrazów, niż wówczas, że HTML nie wizerunek ikona jest wyświetlana na urządzeniach ...

chcę obsłużyć tę sytuację z wdziękiem, w momencie utraty sieci, chcę to przechwycić i pokazać ostrzeżenie dla użytkownika, że ​​nie ma łączności z siecią lub coś takiego ...

Próbowałem użytkownika navigator.onLine zdarzenia .. ale nie działa na wszystkich ustawieniach przeglądarki, którą obsługuję, wersja 5-6 na mozilla itp.

A także moja aplikacja będzie działać tylko w sieci lokalnej Wi-Fi ... Może lub nie może być podłączony do Internetu .. będzie w tym kolorze również ten navigator.onLine działa ..?

Proszę podać mi jakikolwiek inny lepszy sposób to zrobić ...

Answer 1

Można zrobić małą prośbę XHR na serwer i sprawdzić zwróconego statusu.

Jeśli jest to 0, oznacza to the connection is missing.

Tak, coś takiego może dać trochę funkcję użytkową:

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: pominąłem część IE-compliance dla obiektu xhr, ale byłoby łatwo dodać. To więcej, aby uzyskać pomysł.

Answer 2

Na przykład, można użyć

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

Więc metoda noconnection zostanie wywołana, jeśli obraz nie został załadowany.

Więcej informacji tutaj: jQuery/JavaScript to replace broken images