javascript - $(窗口)打开。 ('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

为什么使用fadeOut()时要使用hide()，使用fadeIn()时要使用show()。不过请看这里:

$(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 中适用于我