異步加載特定CSS並加載時刪除等待消息

提高速度並快速向用戶顯示某些內容。我試圖阻止渲染阻塞CSS和加載它使用一些JS代碼異步。我只有一個CSS頁面上維護完整頁面的設計。我想要的是，顯示一些，請等待消息給用戶，直到這個CSS文件加載不完整。異步加載特定CSS並加載時刪除等待消息

只要此CSS文件的加載完成，請刪除此消息。無論所有其他資源加載完成與否。

我嘗試使用下面的js代碼由谷歌（Optimize CSS Delivery）的建議來加載CSS文件：

<script> 
    var cb = function() { 
    var l = document.createElement('link'); l.rel = 'stylesheet'; 
    l.href = 'small.css'; 
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); 
    }; 
    var raf = requestAnimationFrame || mozRequestAnimationFrame || 
     webkitRequestAnimationFrame || msRequestAnimationFrame; 
    if (raf) raf(cb); 
    else window.addEventListener('load', cb); 
</script>

我曾嘗試下面的代碼，以顯示請稍候消息：

<script> 
     document.onreadystatechange = function() { 
      var state = document.readyState 
      if (state == 'complete') { 
       document.getElementById('interactive'); 
       document.getElementById('load').style.visibility = "hidden"; 
      } 
     } 
    </script>

但此代碼阻止頁面，直到所有資源都不下載爲圖像，js或css。但我只是希望它發生在一個特定的CSS文件，以避免FOUC

來源

2016-04-25 Abhi

你可以在默認的CSS（一這是會加載每次）定義了一個預載：

#load { 
    display: block; 
}

而在CSS你想獲取（small.css），您可以覆蓋定義：

#load { 
    display: none; 
}

文件加載後，裝載機也將隱藏感謝定義覆蓋。

來源

2016-04-25 12:07:28 Ozrix

哇，那麼優雅和簡單。從來沒有想過它，過於複雜：D – Abhi

，如果你被允許使用jquery然後

$.get(url, function(){ 
       $('<link>', {rel:'stylesheet', type:'text/css', 'href':url}).appendTo('head'); 
      }); 
     }) 
    ).then(function(){ 
     //your callback function 
    }

來源

2016-04-25 12:14:05 user3045179

異步加載特定CSS並加載時刪除等待消息

回答

相關問題