Question

我使用HTML和Js，CSS创建了该站点，但是预加载器可以在脱机状态下正常工作，但是当我将其放在服务器上时，它会继续加载而不显示实际页面。请我需要帮助

//Preloader
var $preload = $('#preloader') ,
$loader = $('#loader');
if $preload.length > 0) {
console.log("load")
$win.on('load', function() {
$loader. fadeOut(300);
$body_m.addClass("loaded");
$preload.delay(700).fadeout(300);
});
}

<div id="preloader">
<div class="loading">-- Projecton Loading --</div>
<div id="loader">
</div>
<div class="loader-section loader-top"></div>
<div class="loader-section loader-bottom"></div>
</div>

Answer 1

您if语句抛出错误；改变这个

if $preload.length > 0) {

对此

 if ($preload.length > 0) {

Answer 2

您不应该依赖window.load事件。它们可以在某些浏览器中的不同时间触发，并且可能在脚本有机会开始运行之前就已经触发了。

您已经在使用jQuery，它有自己的ready事件，该事件会在DOM加载后触发。

$(function() {
  $('#loader').fadeOut(300)
  $body_m.addClass("loaded")
  $('#preloader').delay(700).fadeout(300)
})

通过将所有选择器（例如：$('#loader')）放入此就绪函数中，可以确保它们都存在。

Answer 3

//Preloader
var $preload = $('#preloader') ,

$loader = $('#loader'); 


// Syntax error => missing "("
// if $preload.length > 0) {

// Correct Line
if ($preload.length > 0) { 
    console.log("load")

    // What is $win here?
    // Maybe you meant $(document) 
    $win.on('load', function() {

        $loader.fadeOut(300);

        // Again, what is $body_m ?
        $body_m.addClass("loaded");

        $preload.delay(700).fadeout(300);
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="preloader">
<div class="loading">-- Projecton Loading --</div>
<div id="loader">
</div>
<div class="loader-section loader-top"></div>
<div class="loader-section loader-bottom"></div>
</div>

预加载器继续加载而不显示网页

3 个答案: