[英]simple preloader HTML/CSS/jQuery doesnt run on iphone chrome
having a problem with my(i thought) simple preloader. 我的简单预加载器有问题。 Seems to be working everywhere I checked except for iPhone5 Chrome. 似乎在我检查过的所有地方都可以使用,除了iPhone5 Chrome。 preloader appears but never fades out... Thank you for help 预加载器出现但永不消失...谢谢您的帮助
HTML: 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 的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;
}
(plus some keyframes not included here) (加上此处未包括的一些关键帧)
script: 脚本:
$(window).on('load', function() {
$('#preloader').delay(250).fadeOut();
})
Codepen: https://codepen.io/anon/pen/MBJGMM Codepen: https ://codepen.io/anon/pen/MBJGMM
Мaybe like this: 像这样:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.