如何在 Javascript 中检测网络丢失？

我的 Web 应用程序适用于多种手持设备，例如 iPad、Galaxy 选项卡等。应用程序从服务器请求图像并在客户端上呈现。

现在的问题有时会发生，在图像渲染过程中网络连接会丢失，而不是在设备上显示 html 无图像图标时......

我想优雅地处理这种情况，在网络丢失时，我想捕获该情况并向用户显示没有网络连接或其他情况的警报...

我尝试使用navigator.onLine事件..但它不适用于我支持的所有浏览器，例如 mozilla 上的 5-6 版本等。

而且我的应用程序将仅在 wifi 本地网络上运行...可能会也可能不会连接到互联网..也会在那个套装中也是这个navigator.onLine作品..？

请为我提供任何其他更好的方法来做到这一点......

您可以向服务器发出一些 XHR 请求并检查返回的状态。

如果是0， 这意味着连接丢失 http://www.w3.org/TR/XMLHttpRequest/#the-status-attribute.

所以，像这样的东西可以给你一些实用功能：

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：我跳过了 IE 合规部分xhr对象，但添加起来很容易。这个更要领悟一下。