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

我想在成功加载.css文件后运行一段代码。有什么方法可以确保吗？

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

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

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

另一种选择是将函数调用直接插入到第一个函数的末尾，这基本上是相同的，但是并没有清楚地说明脚本之间的分离。

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);
    // Do Something
};

加载延迟CSS后运行代码

1 个答案: