5

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

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

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

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

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

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

4

2 回答 2

2

例如，您可以使用

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

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

更多信息在这里：jQuery/JavaScript 替换损坏的图像

于 2012-04-20T15:34:18.563 回答
2

您可以向您的服务器发出一点 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：我跳过了对象的 IE 兼容部分xhr，但它很容易添加。这更多是为了得到这个想法。

于 2012-04-20T16:12:36.920 回答