Javascript 加载延迟CSS后运行代码_Javascript_Pagespeed

Javascript 加载延迟CSS后运行代码

javascript

Javascript 加载延迟CSS后运行代码,javascript,pagespeed,Javascript,Pagespeed,提供了以下代码段，其中建议将不太重要的外部样式表的加载延迟到初始呈现之后在那些CSS文件成功加载后，如何运行一段代码 <html> <head> <style> .blue{color:blue;} </style> </head> <body> <div class="blue"> Hello, world! </div>

提供了以下代码段，其中建议将不太重要的外部样式表的加载延迟到初始呈现之后

在那些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>


.blue{颜色：蓝色；}
你好，世界！
var loadDeferredStyles=函数（）{
var addStylesNode=document.getElementById（“延迟样式”）；
var替换=document.createElement（“div”）；
replacement.innerHTML=addStylesNode.textContent；
document.body.appendChild（替换）
addStylesNode.parentElement.removeChild（addStylesNode）；
};
var raf=requestAnimationFrame | | mozRequestAnimationFrame||
webkitRequestAnimationFrame | | msRequestAnimationFrame；
if（raf）raf（function（）{window.setTimeout（loadDeferredStyles，0）；}）；
else窗口。addEventListener（'load'，loadDeferredStyles）；

我想在那些.css文件成功加载后运行一段代码。有没有办法确保这一点

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

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 loadDeferredWrapper=function（）{
loadDeferredStyles（）；
//做点什么
}
var raf=requestAnimationFrame | | mozRequestAnimationFrame||
webkitRequestAnimationFrame | | msRequestAnimationFrame；
if（raf）raf（function（）{window.setTimeout（loadDeferredWrapper，0）；}）；
else窗口。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
};
var loadDeferredStyles=function（）{
var addStylesNode=document.getElementById（“延迟样式”）；
var替换=document.createElement（“div”）；
replacement.innerHTML=addStylesNode.textContent；
document.body.appendChild（替换）
addStylesNode.parentElement.removeChild（addStylesNode）；
//做点什么
};Firefox说document.body是undefined@BlackBurn027如果body未定义，那么要么文档未加载，要么出现了严重错误。我知道，但几秒钟后，错误消失了，我不知道如何或为什么：P