Функция $ (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>

javascript jquery function google-chrome safari

0

nr159 3 Янв 2018 в 20:21

Answer 1

Почему вы используете hide () при использовании fadeOut () и show () при использовании fadeIn (). Однако посмотрите здесь:

$(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

1

csskevin 3 Янв 2018 в 17:49

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.
});

0

Louys Patrice Bessette 3 Янв 2018 в 17:39

Функция $ (window) on. ('load') работает в Firefox, но не в Safari / iOS или Chrome?

2 ответа

Похожие вопросы

Новые вопросы

javascript