html5网络状态文件读取监听器

HTML5提供了一种检测网络状态变化的API，可以通过该API监听网络状态的变化，实现网络状态的实时监控。在网络状态变化时，可以执行相应的操作，比如文件读取等。

示例代码如下：

// 监听网络状态变化
window.addEventListener('online', function() {
  console.log('网络已连接');
});

window.addEventListener('offline', function() {
  console.log('网络已断开');
});

// 读取文件
function readFile() {
  if (navigator.onLine) {
    // 在线状态，使用ajax读取文件
    $.ajax({
      url: 'path/to/file',
      type: 'GET',
      dataType: 'text',
      success: function(data) {
        console.log(data);
      },
      error: function() {
        console.log('读取文件失败');
      }
    });
  } else {
    // 离线状态，读取本地缓存
    console.log('离线状态，读取本地缓存');
  }
}

在上面的示例中，我们通过`window.addEventListener`方法监听了`online`和`offline`事件，当网络状态变化时，会触发相应的回调函数。在`readFile`函数中，先判断当前网络状态，如果是在线状态，则使用ajax读取文件，如果是离线状态，则从本地缓存中读取文件。

需要注意的是，在使用HTML5的网络状态API时，需要先判断浏览器是否支持该API。可以使用以下代码进行判断：

if (navigator.onLine !== undefined) {
  // 浏览器支持网络状态API
} else {
  // 浏览器不支持网络状态API
}