Jquery 函数在使用文档就绪函数的标头中不起作用

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

这是我的简单代码

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

爪哇语

$(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'});
    });
});

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

$(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'});
});

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

您可以将加载程序div静态html，并fadeOut()站点是否已加载。在这种情况下，您应该使用 <noscript> 构建回退。

.html

<html>
  <body>
    <p>hello world</p>
    <div id="preloader">
      <div id="status">Testing Loader</div>
    </div>
  </body>
</html>

.js

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

.html

.js

相关内容

最新更新

热门标签：