关于断网判断这件小事

呱唧呱唧

起因是我们要在前台做一个断网提示，本来想着很简单的一件事情，结果让我折腾了挺久，这里记录总结一下加深一下印象。

方法总结

第一种：利用h5新出navigator的onLine属性

不好用的理由：
1、只会未连上路由或者局域网时才是false，要是连上路由没有网的情况它会是true.
2、有浏览器兼容问题，具体也懒得管它兼容啥型号的，但是不兼容我们项目组除了我以外所有同事的浏览器，没想到它也是看颜值生效的，哎。

第二种：window的online和offline事件

不好用的理由：
不兼容测试小姐姐的浏览器💔

第三种：使用插件 offline.js

不好用的理由：
哎，怎么说呢，试了好多遍，一度以为是我有问题，没有看懂人家的api，后来才发现它是真的不行，我测试的时候用的是Chrome，连的是wifi，把wifi断开之后，没有反应，后来去讨论区去看了一下，其他人也是这样：

image.png
既然大家都是这样，那我就放心了，，，，放心的，，，弃用了😊

-----------------------------华丽丽的分隔线-------------------------------------

本来就是不想通过请求的方式去实现，结果上面的都不行，我也没有找到其他方法，只能通过请求轮询的方式去判断啦。

第四种：利用image标签的onError事件

大家好，我是例如：

setInterval(function(){
            var $img = $('<img src="你的图片地址?'+new Date().getTime()+'">')
            $img.appendTo('body').css("display","none").load(function(){
                console.log("网络连接成功！")
                $(this).remove()
            }).error(function(){
                console.log("您的网络已断开！")
                $(this).remove()
            })
},5000)

大家好，我是tips:
图片搞小一点，毕竟你看看这个马，就知道它比较吃资源啦。

第五种：轮询ajax请求

大家应该都会，我就不BB了。