周期性Ping检测失败时显示#offline div的实现问题

嘿，我来帮你搞定这个问题！你的思路完全没问题——周期性检测连接状态确实比单次加载实用太多，能完美应对页面不刷新时的网络变化。咱们来看看你的代码需要调整的地方：

问题根源 #

你修改后的代码里有两个关键缺失：

1. 嵌套的ImgLoad函数只被定义了，但没有被调用，所以每次执行checkping其实啥检测都没做；
2. 没有处理图片加载失败的情况（也就是onerror事件），这就是为什么Ping失败时#offline div不会显示的核心原因。

修正后的完整代码 #

function checkping() {
  // 生成随机数避免浏览器缓存图片，保证每次检测都是真实请求
  const randomNum = Date.now() || new Date().getTime();
  const pingImg = new Image();

  pingImg.src = "http://192.168.8.1/images/ping2.jpg?rand=" + randomNum;

  // 图片加载成功：标记为在线状态
  pingImg.onload = function() {
    $("#online").show();
    $("#offline").hide();
  };

  // 图片加载失败：标记为离线状态
  pingImg.onerror = function() {
    $("#offline").show();
    $("#online").hide();
  };
}

// 页面初始化时先执行一次检测，避免用户等待30秒才看到状态
checkping();
// 每30秒自动执行一次检测
setInterval(checkping, 30000);

代码说明 #

• 去掉了不必要的嵌套函数，直接在checkping里实现检测逻辑，避免函数定义后未调用的问题；
• 添加了onerror事件处理：这是实现离线提示的关键，当图片请求失败（网络断开或资源不可用）时，会触发这个函数显示#offline；
• 每次检测都会同时切换两个状态的显示/隐藏，确保在线和离线状态不会同时出现；
• 页面加载时立即执行一次checkping，让用户打开页面就能看到当前网络状态，不用等30秒的首次周期检测。

额外小建议 #

• 如果担心随机数参数的缓存规避效果不够，也可以尝试给图片请求添加cache-control请求头，但随机参数的方式已经足够简单有效；
• 可以考虑给检测过程加个加载状态（比如一个小转圈图标），让用户知道系统正在检测网络，但30秒的间隔下这个需求可能不强烈。

内容的提问来源于stack exchange，提问作者gjames