Js判断CSS文件加载完毕的具体实现

判断CSS文件加载完毕的主要方法是检测link元素的load和error事件，具体步骤如下：

1. 使用JavaScript将CSS文件插入HTML页面中，以确保JavaScript能够访问其link元素。

<link rel="stylesheet" href="style.css" id="css-link">
<script>
  var cssLink = document.getElementById("css-link");
  cssLink.onload = function() {
    console.log("CSS文件已成功加载");
  };
  cssLink.onerror = function() {
    console.log("CSS文件加载失败");
  };
</script>

1. 上面的JavaScript代码获取了CSS文件的link元素，并将其onload和onerror事件处理程序设置为相应的函数。当CSS文件加载成功时，onload事件将被触发，而当加载失败时，则触发onerror事件。

2. 在onload事件处理程序中，我们可以执行任何我们想要在CSS文件加载成功时运行的JavaScript代码。

示例1：检测多个CSS文件是否全部加载完成

有时候，我们需要在多个CSS文件都加载完成后再执行一些JavaScript代码。可以使用回调函数或Promise机制来实现。

<link rel="stylesheet" href="style1.css" id="css-link1">
<link rel="stylesheet" href="style2.css" id="css-link2">
<script>
  function loadCSS(url) {
    return new Promise(function(resolve, reject) {
      var link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = url;
      document.head.appendChild(link);

      link.onload = function() {
        resolve();
      };

      link.onerror = function() {
        reject("CSS文件加载失败: " + url);
      };
    });
  }

  Promise.all([loadCSS("style1.css"), loadCSS("style2.css")])
    .then(function() {
      console.log("所有CSS文件成功加载");
    })
    .catch(function(error) {
      console.log(error);
    });
</script>

上面的代码使用Promsie.all方法来将多个Promise合成一个，以便在所有CSS文件都成功加载时执行代码。

示例2：动态创建HTML元素并改变样式

有时候，我们需要等待CSS文件加载完毕后，再动态创建HTML元素并对其样式进行修改。可以使用上面的方式进行判断。

<link rel="stylesheet" href="style.css" id="css-link">
<div id="my-div">这是一个测试元素</div>
<script>
  var cssLink = document.getElementById("css-link");
  cssLink.onload = function() {
    var div = document.getElementById("my-div");
    div.style.backgroundColor = "red";
  };
</script>

上面的代码在加载完毕CSS文件之后，会将id为"my-div"的div元素的背景色改为红色。