CSS加载时间

我使用HTML5UP.net中的模板创建了一个个人网站：

在main.css文件中有一个带有背景图像的主体样式。我用unsplash.com的url替换了该图像。这样，每次加载页面时，都会出现一个新的随机背景图像

body {
    height: 100%;
    background-color: #ffffff;
    background-image: url("images/overlay.png"), -moz-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("https://source.unsplash.com/random");
    background-image: url("images/overlay.png"), -webkit-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("https://source.unsplash.com/random");
    background-image: url("images/overlay.png"), -ms-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("https://source.unsplash.com/random");
    background-image: url("images/overlay.png"), linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("https://source.unsplash.com/random");
    background-repeat: repeat,          no-repeat,          no-repeat;
    background-size: 100px 100px, cover,                cover;
    background-position: top left,      center center,      bottom center;
    background-attachment: fixed,           fixed,              fixed;
}

这样做的缺点是我的网站加载缓慢。当背景完全加载时，我网站的其余部分就会出现

有什么方法可以在最后加载CSS样式表的这一部分吗？

index.html：

<script type="text/javascript">
window.onload = function loadStyleSheet()
{
        var stylesheet = document.createElement('link');
        stylesheet.href = 'assets/css/bg.css';
        stylesheet.rel = 'stylesheet';
        stylesheet.type = 'text/css';
        document.getElementsByTagName('head')[0].appendChild(stylesheet);
}
</script>

main.css：

body {
    height: 100%;
    background-color: #ffffff;
    background-image: url("images/overlay.png"), -moz-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../../images/bg.jpg");
    background-image: url("images/overlay.png"), -webkit-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../../images/bg.jpg");
    background-image: url("images/overlay.png"), -ms-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../../images/bg.jpg");
    background-image: url("images/overlay.png"), linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../../images/bg.jpg");
    background-repeat: repeat,          no-repeat,          no-repeat;
    background-size: 100px 100px, cover,                cover;
    background-position: top left,      center center,      bottom center;
    background-attachment: fixed,           fixed,              fixed;
}

---

现在，页面在后台之前加载。

您可以使用JavaScript进行加载。您有示例吗？是的，我会处理它^^模板的JavaScript设置为仅在所有资源完全加载后才呈现页面的其余部分。在CSS中，您无法阻止这种情况发生；您必须编辑模板的JavaScript代码。

body {
    height: 100%;
    background-color: #ffffff;
    background-image: url("images/overlay.png"), -moz-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../../images/bg.jpg");
    background-image: url("images/overlay.png"), -webkit-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../../images/bg.jpg");
    background-image: url("images/overlay.png"), -ms-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../../images/bg.jpg");
    background-image: url("images/overlay.png"), linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../../images/bg.jpg");
    background-repeat: repeat,          no-repeat,          no-repeat;
    background-size: 100px 100px, cover,                cover;
    background-position: top left,      center center,      bottom center;
    background-attachment: fixed,           fixed,              fixed;
}