Question

好的，我对JS几乎一无所知，并在codepen上找到了这个预加载页面样式

＆＃13;

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 870px;
    background-color:#000;
    position: relative
}

p{
    font-weight: bold;
    font-size: 30px;
    color:#00ff00;
    display: inline
}

div{
    display: flex;
    justify-content: center;
    align-items: center;
    width:400px;
    height:400px
}

div > span{
    background-color:transparent;
    height:190px;
    width:190px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border:20px solid transparent;
    border-bottom:20px solid red;
    border-top:20px solid red;
    animation: rotateleft 1.25s infinite ease-in-out;
    position: absolute;
}

div > span ~ span {
    background-color:transparent;
    width:150px;
    height:150px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border:20px solid transparent;
    border-left:20px solid red;
    border-right:20px solid red;
    animation: rotateright 1.25s infinite ease-in-out;
    position: absolute;
}

section{
    position: absolute;
    width:;
    overflow: hidden;
    animation: words 2.5s infinite ease-in-out
}

@keyframes words{
    from {
        width:0
    }
    
    to{
        width:130px
    }
    
}

@keyframes rotateleft{
    from{
        transform: rotate(0)
    }
    
    to{
        transform: rotate(-360deg)
    }
}

@keyframes rotateright{
    from{
        transform: rotate(0)
    }
    
    to{
        transform: rotate(360deg)
    }
}

＆＃13;

<section><p>Loading...</p></section>
        <div>
            <span></span>
            <span></span>
        </div>

＆＃13;

我想将此用于我的网站，此页面会在网站加载之前显示。我怎么能和杰基尔一起做到这一点？这是一个我可以说应该在索引之前调用它的地方吗？我是否需要JS函数，或者只使用此示例（仅使用html和css）可以执行此操作。

Answer 1

使用Jquery，您可以执行以下操作：

$(window).load(function(){
   $('#overlay').fadeOut();
});

然后在你的#overlay div中，放入你想要的加载栏。

以下是一个片段，展示了如何使其发挥作用：

$(window).load(function(){
   $('#overlay').fadeOut(2000);
});

#overlay {
    position: fixed; /* Sit on top of the page content *
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,1.0); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay"></div>
<span>You cannot see this if the overlay is here</span>

如何使用Jekyll进行预加载页面？

1 个答案: