简单的预加载器HTML/CSS/jQuery在iPhoneChrome上不运行怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (105)

我的(我认为)简单的预加载器有问题。 似乎在我检查过的地方运行,除了iPhone5 Chrome。 preloader出现,但永远不会淡出...

HTML:

<div id="preloader">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
    <div class="item item-4"></div>
</div>

CSS

#preloader {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  z-index: 999;
  background: red;
  border: solid 3000px white;
}

.item {
  width: 30px;
  height: 30px;
  position: absolute;
  border-radius: 2px;
}

(加上这里没有包括的一些关键帧)

脚本:

$(window).on('load', function() {
  $('#preloader').delay(250).fadeOut();
})

参考:https:/codepen.io/anon/PEN/MBJGMM

提问于
用户回答回答于

也许可以这样:

window.onload=function(){
   setTimeout(function(){
      $('#preloader').fadeOut('slow');
   }, 250);
};
#preloader {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  z-index: 999;
  background: red;
  border: solid 3000px white;
}

.item {
  width: 30px;
  height: 30px;
  position: absolute;
  border-radius: 2px;
}

.item-1 {
  background-color: #46D1E1;
  top: 0;
  left: 0;
  z-index: 1;
  -webkit-animation: item-1_move 1.2s cubic-bezier(.6,.01,.4,1) infinite;
          animation: item-1_move 1.2s cubic-bezier(.6,.01,.4,1) infinite;
}

.item-2 {
  background-color: #FC487F;
  top: 0;
  right: 0;
  -webkit-animation: item-2_move 1.2s cubic-bezier(.6,.01,.4,1) infinite;
          animation: item-2_move 1.2s cubic-bezier(.6,.01,.4,1) infinite;
}

.item-3 {
  background-color: #885DF1;
  bottom: 0;
  right: 0;
  z-index: 1;
  -webkit-animation: item-3_move 1.2s cubic-bezier(.6,.01,.4,1) infinite;
          animation: item-3_move 1.2s cubic-bezier(.6,.01,.4,1) infinite;
}

.item-4 {
  background-color: #FDC521;
  bottom: 0;
  left: 0;
  -webkit-animation: item-4_move 1.2s cubic-bezier(.6,.01,.4,1) infinite;
          animation: item-4_move 1.2s cubic-bezier(.6,.01,.4,1) infinite;
}

@-webkit-keyframes item-1_move {
  0%, 100% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
  25% {-webkit-transform: translate(0, 10px);transform: translate(0, 10px)}
  50% {-webkit-transform: translate(10px, 10px);transform: translate(10px, 10px)}
  75% {-webkit-transform: translate(10px, 0);transform: translate(10px, 0)}
}

@keyframes item-1_move {
  0%, 100% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
  25% {-webkit-transform: translate(0, 10px);transform: translate(0, 10px)}
  50% {-webkit-transform: translate(10px, 10px);transform: translate(10px, 10px)}
  75% {-webkit-transform: translate(10px, 0);transform: translate(10px, 0)}
}

@-webkit-keyframes item-2_move {
  0%, 100% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
  25% {-webkit-transform: translate(-10px, 0);transform: translate(-10px, 0)}
  50% {-webkit-transform: translate(-10px, 10px);transform: translate(-10px, 10px)}
  75% {-webkit-transform: translate(0, 10px);transform: translate(0, 10px)}
}

@keyframes item-2_move {
  0%, 100% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
  25% {-webkit-transform: translate(-10px, 0);transform: translate(-10px, 0)}
  50% {-webkit-transform: translate(-10px, 10px);transform: translate(-10px, 10px)}
  75% {-webkit-transform: translate(0, 10px);transform: translate(0, 10px)}
}

@-webkit-keyframes item-3_move {
  0%, 100% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
  25% {-webkit-transform: translate(0, -10px);transform: translate(0, -10px)}
  50% {-webkit-transform: translate(-10px, -10px);transform: translate(-10px, -10px)}
  75% {-webkit-transform: translate(-10px, 0);transform: translate(-100px, 0)}
}

@keyframes item-3_move {
  0%, 100% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
  25% {-webkit-transform: translate(0, -10px);transform: translate(0, -10px)}
  50% {-webkit-transform: translate(-10px, -10px);transform: translate(-10px, -10px)}
  75% {-webkit-transform: translate(-10px, 0);transform: translate(-10px, 0)}
}

@-webkit-keyframes item-4_move {
  0%, 100% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
  25% {-webkit-transform: translate(10px, 0);transform: translate(10px, 0)}
  50% {-webkit-transform: translate(10px, -10px);transform: translate(10px, -10px)}
  75% {-webkit-transform: translate(0, -10px);transform: translate(0, -10px)}
}

@keyframes item-4_move {
  0%, 100% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
  25% {-webkit-transform: translate(10px, 0);transform: translate(10px, 0)}
  50% {-webkit-transform: translate(10px, -10px);transform: translate(10px, -10px)}
  75% {-webkit-transform: translate(0, -10px);transform: translate(0, -10px)}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="preloader">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
    <div class="item item-4"></div>
</div>

所属标签

可能回答问题的人

  • 天使的炫翼

    17 粉丝531 提问36 回答
  • 富有想象力的人

    3 粉丝0 提问30 回答
  • 学生

    3 粉丝476 提问28 回答
  • o o

    4 粉丝494 提问27 回答

扫码关注云+社区

领取腾讯云代金券