镜像检测原理

实现网址在线监测（基于客户端的 JavaScript）有以下几种方法：

基于 img onload 检测

function isSiteOnline(url,callback,path='/favicon.ico') {
    var timer = setTimeout(function () {
    callback(false);
    // 设置10秒钟的超时时间
    }, 10000)
    // 创建一个img元素并且动态加载
    var img = document.createElement("img");
    img.onload = function () {
    clearTimeout(timer);
    callback(true);
    }
    // 一般来说，使用默认的path即可，但是如果没有ico的话，需要另外找一个比较小的图片来进行加载
    // 加入一个random防止缓存
    img.src = url + path + "?v=" + Math.round(Math.random() * 9999);
}

基于 img onerror 标签

onerror 事件 onerror 事件会在文档或图像加载过程中发生错误时被触发，因此我们可以利用这个时间差计算出 HTTP 延迟。

var ping = 1

setInterval("ping++",100);

el.innerHtml = "<img src="+urlList[i]+"/"+Math.random()+" width='1' height='1' onerror='autotest("+i+")' style='display:none'>"

function autotest(i){ show.text(ping*100+"ms")

基于 Ajax 进行测试

//jquery检查连接的url服务是否有效,适用所有浏览器
const $ = require('jquery')

function NetPing(pingUrl) {
  $.ajax({
    type: "GET",
    cache: false,
    url: pingUrl,
    data: "",
    success: function () {
      alert("网址有效，开始加载。。");
      ipcRenderer.send('asynchronous-message',pingUrl); //异步将渲染进程的数据传给主进程
    },
    error: function () {
      alert("无效网址，请重新输入!");
      $("#vueUrl").val("");
    }
  });
}

参考文件

• https://blog.csdn.net/zhouzuoluo/article/details/113525754
• https://vircloud.net/exp/js-http-latency.html#selection-13.0-971.1

评论