加載延遲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後運行代碼

回答

相關問題