CSS加载时间

Question

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

在 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 样式表？

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

主.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;
}

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