$（window）on。（'load'）函数适用于Firefox，但不适用于Safari / iOS或Chrome？

Question

我不确定原因，但这个特殊功能似乎在Safari / iOS和Chrome浏览器中都不起作用：

$(window).on('load',function(){
  $('#preloader').fadeOut(800).hide();
  $('#preload').fadeIn(800).css('display', 'initial').show();
});

我目前在</head>标签之前插入了脚本。谁能解释为什么会这样？

更新：

$(window).on('load', function() {
  $('#preloader').fadeOut(800).hide();
  $('#preload').fadeIn(800).css('display', 'initial').show();
});

.preloader-wrap {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  text-align: center;
  line-height: 0;
}

#preloader {
  margin: 40px 0;
  padding: 0;
  border: 0;
  width: 45px;
  height: 45px;
}

#preload {
  display: none;
}

img {
  width: 100%;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://static.tumblr.com/4m2ikeh/q2Poxnx2k/jquery-3.2.1.min.js"></script>

<div class="preloader-wrap">
  <img src="https://cdn.ndtv.com/vp/static/images/preloader.gif" id="preloader" />
</div>

<div id="preload">
  <img src="https://78.media.tumblr.com/708bb6dcdaf359fd2ea83d11a0b5b4b8/tumblr_oyslstg5xk1unhdoco10_r1_1280.jpg">
</div>

Answer 1

当你使用fadeIn（）时，为什么在使用fadeOut（）和show（）时使用hide（）。不过要看看这里：

$(document).ready(function() {
  $("#preloader").fadeOut(800, function() {
    $("#preload").fadeIn(800)
  });
});

#preload {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader">
  Preloader Content
</div>
<div id="preload">
  Preload Content
</div>

它适用于Firefox，Chrome，Safari

Answer 2

也许那些显示和隐藏元素的多种同步方式是有原因的。我没有任何IOS设备可以确定。

如果您希望延迟并逐渐消失，请尝试以下方式：

$(window).on('load',function(){
  setTimeout(function(){
    $('#preloader').fadeOut(800, function(){
      $('#preload').fadeIn(800);  // FadeIn after fadeOut complete.
    });
  },800);  // delay from the load event and the fadeOut.
});