¿Cómo detectar la pérdida de red en Javascript?

Question

Mi aplicación web funciona en múltiples dispositivos de mano, como las tabletas Galaxy de iPads, etc. Las imágenes de solicitud de aplicación del servidor se procesan en los clientes.

Ahora el problema es a veces sucede, que la conectividad de red se pierde durante la representación de imágenes, de lo que el tiempo que HTML no-imagen se muestra el icono en los dispositivos ...

quiero manejar esta situación con gracia, en el momento de la pérdida de red, quiero capturar eso y mostrar una alerta al usuario que no hay conectividad de red o algo ...

He intentado al usuario navigator.onLine evento ... pero no está funcionando en todo el conjunto del navegador que soy compatible, versión 5-6 en mozilla, etc.

Y también mi aplicación se ejecutará solo en la red wifi local ... Puede o no estar conectado a internet .. ¿en ese caso también funciona este navigator.onLine ..?

Favor proporcionar cualquier otra forma mejor de hacer esto ...

Answer 1

que podría hacer una petición XHR poco a su servidor y comprobar si el estado devuelto.

Si es 0, significa the connection is missing.

Por lo tanto, algo como esto podría darle una función de utilidad poco:

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 
    } 
}) 

PD: Me salté la parte IE-cumplimiento del objeto xhr, pero sería fácil de añadir. Esto es más para entender la idea.

Answer 2

Por ejemplo, puede utilizar

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

Así método NoConnection se llamará si una imagen no estaba cargada.

Más información aquí: jQuery/JavaScript to replace broken images