运行延迟 CSS 加载后的代码

Question

Google PageSpeed Tools - Insights - Optimize CSS Delivery 中提供了以下代码片段，这表明应该使用它来将不太重要的外部样式表的加载推迟到初始呈现之后。

如何在 CSS 文件成功加载后运行一段代码？

 <html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

Answer 1

I would like to run a piece of code after those .css files have successfully loaded. Is there any way to ensure that?

完成所有这些后，运行您的代码的一个更简单的选择是将第一个函数的调用包装在函数语句中，然后在该调用之后插入您的代码。

var loadDeferredWrapper = function() {
    loadDeferredStyles();
    <b>// Do Something</b>
}

var raf = requestAnimationFrame || mozRequestAnimationFrame ||
    webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(<b>loadDeferredWrapper</b>, 0); });
else window.addEventListener('load', <b>loadDeferredWrapper</b>);

另一种选择是将您的函数调用直接插入到第一个函数的末尾，这本质上是一样的，但脚本之间的分隔不是很清楚。

var loadDeferredStyles = function() {
    var addStylesNode = document.getElementById("deferred-styles");
    var replacement = document.createElement("div");
    replacement.innerHTML = addStylesNode.textContent;
    document.body.appendChild(replacement)
    addStylesNode.parentElement.removeChild(addStylesNode);
    <b>// Do Something</b>
};

运行延迟 CSS 加载后的代码

Run code after deferred CSS is loaded

javascript

pagespeed

运行 延迟 CSS 加载后的代码

Run code after deferred CSS is loaded

javascript

pagespeed

运行延迟 CSS 加载后的代码