$(window)on.('load') 函数适用于 Firefox，但不适用于 Safari/iOS 或 Chrome？答案

【问题标题】：$(window)on.('load') Function Works on Firefox, but Not on Safari/iOS or Chrome?$(window)on.('load') 函数适用于 Firefox，但不适用于 Safari/iOS 或 Chrome？
【发布时间】：2018-01-03 17:21:05
【问题描述】：

我不确定原因，但这个特定功能似乎不适用于 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>

【问题讨论】：

改用$(document).ready()是否有效？
@Barmar 没有。除非我使用$(window).on('load',function()，否则此预加载功能不会激活；但即便如此，尽管它确实适用于 Firefox，但 fadeOut 和 fadeIn 调用似乎无法在 Safari 或 Chrome 中执行......
当您在同一元素上同时拥有 fadeOut() 和 hide() 时，我不明白您要做什么。 fadeOut() 是慢慢隐藏，hide() 是立即隐藏。
而fadeIn()、css('display', 'initial')和show()都显示了元素。
在 OS X 上的 Chrome 中为我工作。

标签： javascript jquery function google-chrome safari

【解决方案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 中对我有用

【讨论】：

fadeIn() 应该在 #preload，而不是 #preloader。
@csskevin 谢谢。这是最接近我正在寻找的解决方案。我将不得不使用它一点点，但这似乎是一种更好的方法。

【解决方案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.
});

【讨论】：

我认为load 事件发生在DOMContentLoaded 之后。那么，为什么它会在更早的事件中更好地发挥作用呢？