预加载器在我的本地主机上显示，但在 github 上部署后不显示？

Question

下面是我的代码，我使用了下面的代码，在 github 页面上部署后预加载器现在可以工作了。 部署后在控制台 status.gif 中显示一条错误消息，但在本地主机中未显示

Github 链接：- https://github.com/mohit421/Portfolio

为什么？ CSS 代码：-

body{
    overflow:hidden;
}
#preloader {
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:var(--clr-light); /* change if the mask should have another color then white */
    z-index: 999999; /* makes sure it stays on top */
}

#status {

    width:300px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(/img/status6.gif?); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}

HTML 代码：-

<div id="preloader">
    <div id="status">&nbsp;</div>
</div>

Javascript代码：

<script type="text/javascript">
    setTimeout(function(){        
        $('#preloader').fadeOut();
        $('.preloader_img').delay(150).fadeOut('slow'); 
    }, 5500);
</script>

Answer 1

您的 GitHub 页面：https://mohit421.github.io/Portfolio/ 无法正常工作，因为您正在加载没有 HTTPS 的 jQuery 库 URL。

因此，您在 Chrome 控制台中遇到此错误：

混合内容：“https://mohit421.github.io/Portfolio/”页面是 通过 HTTPS 加载，但请求了不安全的脚本 'http://code.jquery.com/jquery-2.1.4.min.js'。此请求已 被阻止；内容必须通过 HTTPS 提供。

见下图。

您需要在 jQuery 库调用中使用

https

。

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

Answer 2

在标签之前添加预加载器 div。设置预加载器绝对位置并设置主体相对位置。最后将预加载器高度设置为100vh。