为什么我的jQuery .load()方法会随机出现加载失败问题？

问题根源 #

1. $.load() 是异步AJAX请求，你当前的代码没有等待MD文件加载完成就执行了转换逻辑，请求完成的时机不固定，就会出现有时能读到内容、有时读空的随机故障。
2. Chrome浏览器默认禁止file://协议的页面发起AJAX请求读取本地文件，所以你直接手动打开本地HTML文件时，MD文件永远加载失败，转换内容自然无法显示。

解决方法 #

1. 调整代码执行顺序，保证加载完成后再转换 #

你不需要把MD内容先塞到隐藏div再读取，直接在load的回调函数里处理转换即可，修改后代码如下：
首先调整页面内的代码结构：

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="converter.js"></script>
</head>
<body>
  <div id="output"></div>
  <script>
    $(document).ready(function() {
      // 加载MD文件，加载完成后触发回调执行转换
      $.get("convertme.md", function(mdContent) {
        $("#output").html(convert(mdContent));
      })
    });
  </script>
</body>

调整converter.js的代码，只保留可复用的转换函数即可：

function convert(md){
  // 保留你原来的替换逻辑
  return md;
};

2. 解决本地预览的跨域限制 #

不要直接把HTML文件拖入Chrome打开，用本地静态服务预览即可：

• 推荐直接安装VS Code的Live Server插件，右键HTML文件选择「Open with Live Server」启动预览，自动规避跨域问题。
• 也可以用其他本地静态服务工具，比如Python的python -m http.server、Node的serve包都可以。

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