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

Load specific CSS asynchronously and when it is loaded remove waiting message

本文关键字：加载 删除 等待 消息 CSS 异步      更新时间：2023-09-26

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

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

我正在尝试按照谷歌的建议使用以下js代码（优化CSS交付）来加载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

您可以在默认 CSS 中定义一个预加载器（每次都会加载的那个）：

#load {
   display: block;
}

在你想要获取的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
  }
相关文章：