Javascript 在iPhone中加载网站时预加载程序不工作

有人能告诉我，如果网站是用iPhone打开的，为什么我的预加载程序不能工作

它正在安卓手机和笔记本电脑上工作。加载程序应该是动画的，但在iPhone上它只是静态的。 我使用AJAX在用户单击登录并显示加载程序时发布数据。这是我的密码。下面是来自iPhone的图片。请帮忙

CSS:

@import url(https://fonts.googleapis.com/css?family=Montserrat+Alternates:400,700);
@import url(https://fonts.googleapis.com/css?family=Eczar);

.dx-context_bg {
  margin: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #ffffff;
}

.pre_loader-wrapper {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.pre_loader {
  display: block;
  position: absolute;
  top: 50%;
  left: 49%;
  width: 58px;
  height: 86px;
  margin-top: -43px;
  margin-left: -29px;
  font-family: "Bookman Old Style", sans-serif;
  line-height: 42px;
  overflow: hidden;
  opacity: 0;
  animation: Loader 10s ease-in-out infinite;
  -webkit-animation: Loader 10s ease-in-out infinite;
}
.pre_loader * {
  display: block;
  position: absolute;
}

@-webkit-keyframes Loader {
  5%,
  100% {
    opacity: 1;
  }
  30% {
    width: 58px;
    margin-left: -29px;/* Prevent Object Moment from Beginning */
  }
  40%,
  82% {
    width: 180px;
    margin-left: -65px;
  }
  86%,
  100% {
    width: 4px;
    margin-left: 2px;
  }
}

@keyframes Loader {
  5%,
  100% {
    opacity: 1;
  }
  30% {
    width: 58px;
    margin-left: -29px;/* Prevent Object Moment from Beginning */
  }
  40%,
  82% {
    width: 180px;
    margin-left: -65px;
  }
  86%,
  100% {
    width: 4px;
    margin-left: 2px;
  }
}
.pre_loader .dx_rectangle {
  left: 0;
  bottom: 20px;
  width: 58px;
  height: 66px;
  border: 2px solid #313131;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #fff;
}
.pre_loader .dx_rectangle span {
  left: 24px;
  bottom: 3px;
  font-size: 36px;
  font-weight: 700;
  color: #000000;
  animation: FillSpan 10s ease-in-out infinite;
  -webkit-animation: FillSpan 10s ease-in-out infinite;
}
.pre_loader .dx_rectangle.dx_outlines {
  animation: Outlines 10s ease-in-out infinite;
  -webkit-animation: Outlines 10s ease-in-out infinite;
}
.pre_loader .dx_rectangle.dx_fill {
  height: 4px;
  border-color: transparent;
  background-color: #5f5f5f;
  animation: Fill 10s ease-in-out infinite;
  -webkit-animation: Fill 10s ease-in-out infinite;
}
.pre_loader .dx_rectangle.dx_fill span {
  color: #fff;
}

@-webkit-keyframes Outlines {
  82% {
    width: 58px;
    height: 66px;
    bottom: 20px;
  }
  85%,
  100% {
    width: 4px;
    bottom: 0;
  }
  85%,
  86% {
    height: 86px;
    border-width: 2px;
  }
  89%,
  100% {
    height: 0;
    border-width: 0;
  }
}

@keyframes Outlines {
  82% {
    width: 58px;
    height: 66px;
    bottom: 20px;
  }
  85%,
  100% {
    width: 4px;
    bottom: 0;
  }
  85%,
  86% {
    height: 86px;
    border-width: 2px;
  }
  89%,
  100% {
    height: 0;
    border-width: 0;
  }
}

@-webkit-keyframes Fill {
  30%,
  100% {
    height: 66px;
  }
  30% {
    background-color: #3e3e3e;
  }
  40%,
  100% {
    background-color: #000000;
  }
  82% {
    width: 58px;
    height: 66px;
    bottom: 20px;
  }
  85%,
  100% {
    width: 4px;
    bottom: 0;
  }
  85%,
  86% {
    height: 86px;
    border-width: 2px;
  }
  89%,
  100% {
    height: 0;
    border-width: 0;
  }
}

@keyframes Fill {
  30%,
  100% {
    height: 66px;
  }
  30% {
    background-color: #3e3e3e;
  }
  40%,
  100% {
    background-color: #000000;
  }
  82% {
    width: 58px;
    height: 66px;
    bottom: 20px;
  }
  85%,
  100% {
    width: 4px;
    bottom: 0;
  }
  85%,
  86% {
    height: 86px;
    border-width: 2px;
  }
  89%,
  100% {
    height: 0;
    border-width: 0;
  }
}

@-webkit-keyframes FillSpan {
  80% {
    left: 24px;
  }
  84%,
  100% {
    left: -34px;
  }
  82% {
    bottom: 3px;
  }
  85%,
  100% {
    bottom: 9px;
  }
}

@keyframes FillSpan {
  80% {
    left: 24px;
  }
  84%,
  100% {
    left: -34px;
  }
  82% {
    bottom: 3px;
  }
  85%,
  100% {
    bottom: 9px;
  }
}
.pre_loader .dx_rinkin_coffee {
  left: -220px;
  top: 19px;
  width: fit-content;
  animation: rinkinCoffee 10s ease-in-out infinite;
  -webkit-animation: rinkinCoffee 10s ease-in-out infinite;
}
.pre_loader .dx_rinkin_coffee span {
  display: inline-block;
  position: static;
  color: #313131;
}
.pre_loader .dx_rinkin_coffee span.dx_rinkin {
  font-size: 36px;
  font-weight: 700;
}
.pre_loader .dx_rinkin_coffee span.dx_coffee {
  font-family: "Monospace", serif;
  font-size: 41px;
  font-weight: 400;
}

@-webkit-keyframes rinkinCoffee {
  30% {
    left: -220px;
  }
  40%,
  82% {
    left: 62px;
  }
  86%,
  100% {
    left: -260px;
  }
}

@keyframes rinkinCoffee {
  30% {
    left: -220px;
  }
  40%,
  82% {
    left: 62px;
  }
  86%,
  100% {
    left: -260px;
  }
}
.pre_loader .dx_slogan {
  left: 100px;
  bottom: 0;
  width: fit-content;
  font-size: 12px;
  line-height: 16px;
  color: #313131;
  opacity: 0;
  animation: Slogan 10s ease-in-out infinite;
  -webkit-animation: Slogan 10s ease-in-out infinite;
}

@-webkit-keyframes Slogan {
  42% {
    opacity: 0;
  }
  48%,
  100% {
    opacity: 1;
  }
  81% {
    right: 2px;
  }
  86%,
  100% {
    right: 58px;
  }
}

@keyframes Slogan {
  42% {
    opacity: 0;
  }
  48%,
  100% {
    opacity: 1;
  }
  81% {
    right: 2px;
  }
  86%,
  100% {
    right: 58px;
  }
}

jQuery：

$("#login-btn").click(function(){
  var username = $('#username').val();
  var password = $('#password').val();
  console.log("login button click");
      $.ajax({
       type: 'POST',
       url: baseURL + "login/user_login_new",
       dataType : 'json',
       data: {
            username:username,
            password:password},
       beforeSend: function(){
        $("#newloader").show();
       },
       success: function(response){
                // console.log(response);
                 if(response == 1){
                    console.log("success");
                    window.location.href = baseURL + "dashboard/view";
                 }else if(response == 0){
                    console.log("failed");
                    window.location.href = "login";
                 }else if(response == 2){
                    var previousURL = "<?php  echo $this->session->userdata('previous_url'); ?>";
                    console.log("success");
                    window.location.href = previousURL;
                 }
       },
       complete : function() {
            console.log("complete");
        // This will run after sending an Ajax complete
        }
      });

});

$（“#登录btn”）。单击（函数（）{
var username=$（'#username'）.val（）；
var password=$（'#password'）.val（）；
日志（“登录按钮点击”）；
$.ajax({
键入：“POST”，
url:baseURL+“登录/用户登录\u新建”，
数据类型：“json”，
数据：{
用户名：用户名，
密码：password}，
beforeSend:function（）{
$（“#newloader”）.show（）；
},
成功：功能（响应）{
//控制台日志（响应）；
如果（响应==1）{
控制台日志（“成功”）；
window.location.href=baseURL+“仪表板/视图”；
}否则如果（响应==0）{
console.log（“失败”）；
window.location.href=“login”；
}否则如果（响应==2）{
var-previousURL=“”；
控制台日志（“成功”）；
window.location.href=previousURL；
}
},
完成：函数（）{
控制台日志（“完成”）；
//这将在发送Ajax完成后运行
}
});
});

---

将链接提供给check@Tausif即使你有一个链接，你也需要登录网站才能看到预加载程序。@miorfarhan至少向我们提供预加载程序的css或js。上面的代码只切换它的可见性，但不包含任何实际动画。@user6我已经更新了css代码，我只使用css。