Javascript 异步加载特定CSS，并在加载时删除等待消息

以提高速度并快速向用户显示内容。我试图阻止渲染阻塞css，并使用一些js代码异步加载它。我在页面上只有一个css来维护整个页面的设计。我想要的是，向用户显示一些请等待消息，直到css文件加载未完成

此CSS文件加载完成后，立即删除此消息。无论其他所有资源加载是否完成

我正试图按照google（）的建议使用以下js代码来加载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>

var cb=函数（）{
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窗口。addEventListener（'load'，cb）；

我已尝试使用以下代码显示“请稍候”消息：

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

document.onreadystatechange=函数（）{
var state=document.readyState
如果（状态==“完成”）{
document.getElementById（'interactive'）；
document.getElementById（'load'）.style.visibility=“hidden”；
}
}

---

但这段代码会阻塞页面，直到所有资源都没有下载，无论是图像、js还是css。但我只希望它发生在特定的CSS文件上，以避免

您可以在默认CSS中定义一个预加载程序（每次都要加载的预加载程序）：

在要获取的CSS（

small.CSS

）中，可以覆盖定义：

#load {
   display: none;
}

---

加载文件后，由于定义覆盖，加载程序也将隐藏。

如果允许使用jquery，那么

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

$.get（url，函数（）{
$（''，{rel:'stylesheet'，type:'text/css'，'href'：url}）.appendTo（'head'）；
});
})
).然后（函数（）{
//您的回调函数
}

哇，如此优雅和简单。没想到，它变得太复杂了：D

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