加载延迟CSS后运行代码

Google PageSpeed Tools - Insights - Optimize CSS Delivery中提供了以下片段，这表明应该使用此选项推迟加载不太重要的外部样式表，直到初始渲染结束。加载延迟CSS后运行代码

如何在这些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>

来源

2016-11-24 Antony Dmnx

这个问题是问如何等待一两件事，运行的是之前加载，这是一个交代，对专题问题 –

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

一个简单的选项后，所有这一切都完成后运行你的代码，是包装第一功能的invokation在函数语句，那么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 
};

来源

2016-11-26 07:26:42

火狐说document.body的是未定义 – BlackBurn027

@ BlackBurn027如果身体是不确定的那么无论是文档没有加载，或者有什么可怕的错误。 –

我知道，但几秒后，错误消失，我不知道如何或为什么：P – BlackBurn027

加载延迟CSS后运行代码

回答

相关问题