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

Question

我的web应用程序工作在多个手持设备上，如iPads、Galaxy等。应用程序从服务器请求图像并在客户端呈现。

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

我想优雅地处理这种情况，在网络丢失的时候，我想捕捉它，并向用户显示没有网络连接或其他什么的警告.

我试着使用navigator.onLine事件。但是它并不是在我所支持的所有浏览器上工作，比如mozilla上的5-6版本。

和我的应用程序只能在无线局域网上运行.可能连接也可能没有连接到互联网。这个navigator.onLine也会在那个附图中工作吗..？

请给我提供其他更好的方法.

Answer 1

您可以对服务器执行少量XHR请求，并检查返回的状态。

如果是0，这意味着连接缺失了。

所以，像这样的东西可以给您提供一个小的实用函数：

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遵从部分，但是它很容易添加。更多的是为了得到这个想法。

Answer 2

例如，您可以使用

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

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

更多信息在这里：用jQuery/JavaScript替换破碎的图像