Question

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

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

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

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

此外，我的应用程序只能在wifi本地网络上运行...可能或可能没有连接到互联网 ..在这种情况下，这个navigator.onLine也可以运行..？< / p>

请告诉我任何其他更好的方法......

Answer 1

例如，您可以使用

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

因此，如果未加载图像，将调用noConnection方法。

此处有更多信息：jQuery/JavaScript to replace broken images

Answer 2

您可以向服务器发出一点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兼容部分，但它很容易添加。这更像是为了得到这个想法。

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

2 个答案: