CSS加载时间

Question

我使用HTML5UP.net中的模板创建了一个个人网站： https ://html5up.net/identity

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

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样式表的这一部分？

Answer 1

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>

bg.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("https://source.unsplash.com/random/1920x1080");
    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/1920x1080");
    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/1920x1080");
    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/1920x1080");
    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;
}

的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;
}

现在，页面在背景之前加载。