Question

在我的代码中，我尝试使用Bootstrap向我的网站添加预加载器。我使用默认引导程序JQuery版本3.2.1时出现问题，但当我使用JQuery 1.9.1版本时，它就像魅力一样，但其他Bootstrap功能停止工作我试图解决问题，但我完全失败所以有没有办法使这个功能与JQuery's 3.2.1或我的代码中缺少的功能兼容？您可以查看我的JSfiddle

这是我的简单代码

<html>
<body>
<p>hello world</p>
</body>
</html>

的Javascript

$(window).ready(function(){
    $( "body" ).prepend( '<div id="preloader"><div id="status">Testing Loader</div></div>' );
    $(window).on('load', function() { // makes sure the whole site is loaded 
    $('#status').fadeOut(); // will first fade out the loading animation 
    $('#preloader').delay(750).fadeOut('slow'); // will fade out the white DIV that covers the website. 
    $('body').delay(750).css({'overflow':'visible'});
    });
});

Answer 1

jQuery版本没有问题。请勿使用$(window).ready(..，如下所示：

＆＃13;

$(window).on('load', function() { // makes sure the whole site is loaded 
    $( "body" ).prepend( '<div id="preloader"><div id="status">Testing Loader</div></div>' );
    $('#status').fadeOut(); // will first fade out the loading animation 
    $('#preloader').delay(750).fadeOut('slow'); // will fade out the white DIV that covers the website. 
    $('body').delay(750).css({'overflow':'visible'});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>hello world</p>

＆＃13;

Answer 2

如果网站已加载，您可以将加载程序div保留为html，将fadeOut()保存为<noscript>。在这种情况下，您应该使用<html> <body> <p>hello world</p> <div id="preloader"> <div id="status">Testing Loader</div> </div> </body> </html>建立一个后备。

HTML

$(document).ready(function() {
  $(window).on('load', function() {
    $('#status').fadeOut(300);
    $('#preloader').delay(400).fadeOut(600);
  });
});

JS

the js inside index.html file

Jquery函数使用Document ready函数在头文件中工作

2 个答案:

HTML

JS