旧浏览器中替代preload延迟加载样式表的方案咨询

方案1：监听滑块插件的初始化完成事件（推荐） #

大部分第三方滑块插件都会提供初始化完成的回调或事件（比如init、afterRender、slidesLoaded等），直接在这个时机动态插入样式表，能精准匹配需求，同时兼容所有支持JS的浏览器：

<script>
// 替换为你所用滑块插件的初始化完成事件
document.addEventListener('sliderInitialized', function() {
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.href = '<?php echo get_stylesheet_directory_uri(); ?>/slider-styles1.css';
  document.head.appendChild(link);
});

// 示例：如果是Swiper滑块，写法类似
// var mySwiper = new Swiper('.swiper-container', {
//   on: {
//     init: function() {
//       // 这里插入样式表代码
//     }
//   }
// });
</script>

说明：优先查找你使用的滑块插件文档，找到对应的初始化完成钩子，这是最可靠的方式，能确保样式表在动态HTML和内联CSS生成后才加载。

方案2：监听滑块图片加载完成 #

因为你的样式依赖图片尺寸计算出的内联CSS，所以等滑块内所有图片加载完成后再加载样式表：

<script>
function loadSliderStyles() {
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.href = '<?php echo get_stylesheet_directory_uri(); ?>/slider-styles1.css';
  document.head.appendChild(link);
}

// 获取滑块内的所有图片
var sliderImages = document.querySelectorAll('.slider-container img'); // 替换为你的滑块容器选择器
var loadedCount = 0;

if (sliderImages.length === 0) {
  // 无图片时直接加载
  loadSliderStyles();
} else {
  sliderImages.forEach(function(img) {
    // 图片已加载完成
    if (img.complete) {
      loadedCount++;
    } else {
      img.addEventListener('load', function() {
        loadedCount++;
        // 所有图片加载完成后加载样式表
        if (loadedCount === sliderImages.length) {
          loadSliderStyles();
        }
      });
      // 处理图片加载失败的情况
      img.addEventListener('error', function() {
        loadedCount++;
        if (loadedCount === sliderImages.length) {
          loadSliderStyles();
        }
      });
    }
  });
}
</script>

说明：需要替换.slider-container为你实际的滑块容器选择器，这个方法不需要依赖插件的特定事件，兼容性更广，即使插件没有提供回调也能用。

方案3：noscript回退+动态加载（兼顾无JS场景） #

如果需要兼容完全禁用JS的浏览器，同时确保JS环境下延迟加载，可以结合noscript和动态加载：

<!-- 无JS时直接加载样式表 -->
<noscript>
  <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/slider-styles1.css">
</noscript>

<script>
// 等待DOM加载完成，再延迟一小段时间加载（或结合上述方案的事件）
document.addEventListener('DOMContentLoaded', function() {
  // 可以根据实际情况调整延迟时间，确保滑块生成完成
  setTimeout(function() {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = '<?php echo get_stylesheet_directory_uri(); ?>/slider-styles1.css';
    document.head.appendChild(link);
  }, 500); // 延迟时间可按需调整
});
</script>

说明：setTimeout的延迟时间需要根据你的滑块加载速度调整，确保滑块的动态HTML和内联CSS已生成，这种方式兼容性最好，但精准度略低于前两种方案。

注意事项 #

• 替换<?php echo get_stylesheet_directory_uri(); ?>为你的样式表路径，也可以继续用<?php bloginfo('stylesheet_directory'); ?>，但get_stylesheet_directory_uri()是WordPress更推荐的函数。
• 测试时要覆盖目标旧浏览器（如Firefox 54及以下），确保样式表能正常加载并生效。

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