预加载器无法在线工作

Question

我正在为我的网站使用预加载器。我只是使用 CSS 设计了它，并编写了逻辑以在网站完全加载时隐藏预加载器。整个东西在我的本地机器上运行，但是当我把它放到网上时它就不起作用了。

这是 link 的网站: http://deepanshubatra.tk (请使用 google chrome)

我提到的是 HTML、CSS 和 javascript 代码：

CSS:

 div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center; }

Javascript

<script > 

  jQuery(document).ready(function($) {  

// site preloader -- also uncomment the div in the header and the css style           for #preloader
$(window).load(function(){
$('#preloader').fadeOut('slow',function(){$(this).remove();});
});

});

</script>

HTML

<div id="preloader"></div>

Answer 1

您在控制台中遇到错误： Uncaught ReferenceError: jQuery is not defined

将 <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 添加到您的 head 标签。

Answer 2

页面控制台中的错误是jQuery is not defined。所以你需要在你的脚本中加载 jQuery 。以下是如何将其与 CDN 一起使用：

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Answer 3

你可以试试这个代码。

在正文中添加HTML。

<div class="se-pre-con">
<img src="../images/logo-02.svg">
</div>

添加这个CSS代码：

.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: #000;
    margin: 0 auto;
    text-align: center;
}
div.se-pre-con img{
    max-width: 300px;
    top: 20%;
    position: relative;
}
div.se-pre-con.highlighted{
    display:none;
}

页脚中的 jQuery 代码：

<script>
    jQuery(function() {
    jQuery(this).addClass('highlighted');
        setTimeout(function () {
            jQuery('.se-pre-con').addClass('highlighted');
        }, 2000);});
    </script>

预加载器无法在线工作

preloader not working online

html

javascript

css

preloader