Website judges network connection disconnection, JS judges network connection disconnection, best practice

reference ：https://blog.csdn.net/ty497122758/article/details/26613775

Ideas ：js There is no direct way to judge network disconnection , The general method does not work well ( As long as it is on the LAN, it will be judged as connected , Can not strictly judge whether to connect to the Internet )

Special methods , Use js Get a picture ( Baidu logo) But it won't show , Judge if you are successful ; We need to pay attention to , Most browsers have a cache ( Resources with the same file name will not be loaded repeatedly ), So take measures ; Add parameters after the picture file ( Generated by time ), Let the browser think that it is not the same picture .

Don't talk much , Code up

window.onload = function () {
     // When the web page is loaded, it will run 
    var nextValue = true; // Used to determine whether the next cycle 
    setInterval(function () {
     // Timing cycle ,2 Seconds at a time 
        if (nextValue == true) {
    
            var EventUtil = {
    
                addHandler: function (element, type, handler) {
    
                        if (element.addEventListener) {
    
                            element.addEventListener(type, handler, false);
                        } else if (element.attachEvent) {
    
                            element.attachEvent("on" + type, handler);
                        } else {
    
                            element["on" + type] = handler;
                        }
                    },
                    removeHandler: function (element, type, handler) {
    
                        if (element.removeEventListener) {
    
                            element.removeEventListener(type, handler, false);
                        } else if (element.detachEvent) {
    
                            element.detachEvent("on" + type, handler);
                        } else {
    
                            element["on" + type] = null;
                        }
                    }
            };
            var dom = document.createElement('img');
            dom.style = 'display:none;';
            dom.src = 'https://www.baidu.com/img/flexible/logo/pc/result.png';
            dom.src += '?t=' + (+new Date()); // Add parameters after the picture file ( Generated by time )
            dom.id = 'map_img';
            EventUtil.addHandler(dom, 'error', function () {
    
                swal({
     // amount to alert, But more beautiful 
                        title: " The network connection is down ！",
                        text: " Please check the network connection ！",
                        type: "error",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: " I know it. ！",
                        cancelButtonText: " No reminder for now ！",
                        closeOnConfirm: true,
                        closeOnCancel: true
                    },
                    function (isConfirm) {
    
                        if (isConfirm) {
    } else {
    
                            nextValue = false;
                        }
                    });
            });
            document.body.appendChild(dom);
        }
    }, 2000);
};

swal Provide more beautiful pop-up boxes , Import required css and js：
https://uosblog.top/ZBXYDYFX/js/sweetalert-dev.js
https://uosblog.top/ZBXYDYFX/css/sweetalert.css
It is recommended to introduce it to your website

It also needs to be introduced https://code.jquery.com/jquery-3.6.0.min.js

swal More ways to use http://mishengqiang.com/sweetalert/

effect ：