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

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

现在问题有时发生,在渲染图像期间网络连接丢失,而不是设备上显示html无图像图标的时间……

我想优雅地处理这种情况,在网络丢失的时候,我想捕获它并向用户显示没有网络连接或其他东西的警报……

我尝试使用navigator.onLine事件..但它不支持我支持的所有浏览器集,mozilla等5-6版本.

而且我的应用程序将只在wifi本地网络运行…可能或可能没有连接到互联网..将在该诉讼中也这个navigator.onLine工作..？

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

最佳答案

您可以对服务器执行一些XHR请求并检查返回的状态.

如果为0,则表示the connection is missing.

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

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：我跳过了xhr对象的IE兼容部分,但它很容易添加.这更像是为了得到这个想法.