WordPress异步加载CSS：代码无法加载CSS原因排查求助

嘿，我来帮你梳理下这段loadCSS代码在WordPress里没生效的几个常见原因，毕竟WordPress有自己特有的资源加载逻辑，和纯静态页面场景不太一样：

• 函数没被正确调用，或调用时机不对
  这段代码只是定义了loadCSS函数，但你得主动调用它才能触发加载啊！比如要在函数后面加上类似loadCSS('你的CSS文件完整路径');的代码。而且在WordPress里，直接把这段JS写在functions.php里是不行的——你得通过wp_enqueue_script把这段脚本注册并输出到前端，或者把代码放到主题的footer.php（确保DOM已经部分渲染的位置）里。如果函数根本没被执行，自然不会加载CSS。

• DOM元素获取失败
  代码里是通过window.document.getElementsByTagName("script")[0]找第一个<script>标签来插入CSS，但如果这段JS在<head>最顶部执行，此时页面还没渲染出任何<script>标签，ref变量就会是null，insertBefore操作就会报错失败。你可以把这段JS放到页面靠后的位置，或者改成用document.head作为插入参考：

  var ref = before || window.document.head;
  

• CSS路径错误
  调用loadCSS时传入的href路径很可能不对。在WordPress里，绝对不要硬写相对路径或者固定域名的绝对路径（比如网站安装在子目录时会失效），最好用WordPress的PHP函数生成正确路径，再传递给JS：

  <script>
  loadCSS('<?php echo get_stylesheet_directory_uri(); ?>/assets/css/your-style.css');
  </script>
  

• 缓存干扰
  浏览器缓存或者WordPress的缓存插件（比如WP Rocket、W3 Total Cache）可能保留了旧的页面版本，导致你修改的代码根本没被加载。先清掉浏览器缓存，再临时禁用缓存插件试试效果。

• 和WordPress原生样式机制冲突
  WordPress本身用wp_enqueue_style来管理样式加载，如果你异步加载的CSS和原生方式加载的样式有重复依赖，或者某些主题/插件强制修改了样式加载逻辑，可能会导致异步加载的CSS不生效。另外，有些主题会对样式做合并、压缩处理，也可能和这段异步代码冲突。

• setTimeout无延迟的潜在问题
  代码里的setTimeout没有设置延迟时间，虽然浏览器会把它放到事件队列末尾，但极端情况下可能导致ss.media的切换不及时，或者被其他脚本打断。可以试试给setTimeout加个极小的延迟，比如：

  setTimeout(function() {
      ss.media = media || "all";
  }, 10);
  

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