一般來說判斷網路狀態都是用的h5提供的navigator去判斷、專案一般這樣去用

if(!navigator.onLine){
    e.stopPropagation();
    layer.msg('網路未連線，請檢查重試',{time:3000,icon:5});
	return;
}

還可以通過事件去判斷網路何時斷開何時連線，不過通過事件去判斷向不好

window.addEventListener('online', function(){
    console.log('網路連線恢復！');
})
window.addEventListener('offline', function(){
    console.log('網路連線中斷！');
})
//或者
window.ononline=function(){
    console.log('網路連線恢復！');
}
window.onoffline=function(){
    console.log('網路連線中斷！');
}
 

然而navigator.onLine和online、offline事件卻不是萬能的，在pc端時只能判斷無線和網線是否連線，而不能判斷是否有網路、是否可以上網

當然也可以發起ajax請求，根據請求結果判斷網路的通斷

$.ajax({
  url: 'https://sug.so.360.cn/suggest',
  dataType:'jsonp',
  success: function(result){
    console.log('網路正常')
  }, 
  error: function(result){
    console.log('網路異常')
  }
});

當然這種也不是很完美，而且不是很實用，無法很好的區分是伺服器出現故障還是使用者的網路有問題。但是這確實最有效的方式

還可以往網頁放一張圖片，看一下是否請求到

<img id="img-test" style="display:none;" onerror="console.log('網路故障')"/>
<script>
  function onLine(){
    var imgPath = "https://www.baidu.com/img/bd_logo1.png";
    var timeStamp = Date.parse(new Date());
    $("#img-test").attr("src", imgPath + "?timestamp=" + timeStamp);
  };
  onLine()
</script>
 

綜合來看，這是圖片是否載入成功是最佳判斷網路通斷的方案，下面是我簡單封裝了一個判斷網路通斷的方法

function onLine(callback){
    var img = new Image();
    img.src = 'https://www.baidu.com/favicon.ico?_t=' + Date.now();
    img.onload=function(){
        if (callback) callback(true)        
    };
    img.onerror=function(){
        if (callback) callback(false)
    };
}	
onLine(function(flag){
    if(flag){
        console.log('網路暢通')
    }else{
        console.log('網路故障')
    }
})

onLine函式判斷是否正常，正常與否結果在回撥函式返回，也可以改成promise形式，但是必須非同步返回，不可以做成像navigator.onLine這種同步判斷也是一種弊端，但綜合來說是不需要任何依賴，禁用原生功能就可以實現判斷網路暢通與否的最佳方案了！！！！！