本文來源網(wǎng)絡(luò)版權(quán)歸原作者所有
在我們進行網(wǎng)站開發(fā)的時候梆造，為了提高用戶的體驗待德，往往需要判斷當前的網(wǎng)絡(luò)狀態(tài)丁眼，在未連接網(wǎng)絡(luò)的情況下給予錯誤的提示锨亏。下面通過三種方案給出js在客戶端判斷當前網(wǎng)絡(luò)狀態(tài)的情況
navigator.onLine
通過navigator.onLine判斷當前網(wǎng)絡(luò)狀態(tài)：
if(navigator.onLine){
...
}else{
...
}
非常簡單炕泳，但是并不準確-根據(jù) MDN 的描述：
navigator.onLine只會在機器未連接到局域網(wǎng)或路由器時返回false纵诞，其他情況下均返回true。
也就是說培遵，機器連接上路由器后浙芙，即使這個路由器沒聯(lián)通網(wǎng)絡(luò)登刺，navigator.onLine 仍然返回 true。
ajax請求
采用get請求的方式嗡呼，根據(jù)返回值判斷是否能夠成功get到數(shù)據(jù)纸俭，從而確定當前的網(wǎng)絡(luò)狀態(tài)：
$.ajax({ url: 'x.html', success: function(result){
...
}, error: function(result){
...
}
});
獲取網(wǎng)絡(luò)資源
原理同2，在頁面放一張隱藏圖片南窗，設(shè)置其onerror函數(shù)
(獲取圖片資源失敗時會調(diào)用該函數(shù))
function getImgError(){
alert("Network disconnect!");
}
$(function(){
$("#btn-test").click(function(){
var imgPath = "https://www.baidu.com/img/bd_logo1.png";
var timeStamp = Date.parse(new Date());
$("#img-test").attr("src", imgPath + "?timestamp=" + timeStamp);
});
});
<body>
<img id="img-test" style="display:none;" onerror="getImgError()"/>
<button id="btn-test">check status</button>
</body>
每次點擊button時揍很，更新該圖片的src。若獲取圖片失敗万伤，則認為網(wǎng)絡(luò)連接失敗窒悔。
** PS: 三種方法都不是很理想，但暫時尚未找到更好的解決方案敌买。**
