Javascript 加载动画无法跨浏览器工作

我有一个基本的加载动画。它应该在用户点击上传按钮时运行

现在它可以在Chrome和UC浏览器中完美工作。但它在Safari和Opera Mini中不起作用。我也必须支持这些浏览器

第一次开发这样的东西，所以我不知道我哪里出错了。是我的CSS不起作用还是我的jQuery没有执行

我的HTML代码：

  {{ form.photo1 }}
  <div class="loader">
      <div class="spinner"></div>
  aik min</div>
  <input type="submit" class="UploadBtn btn bl cl bco mbs mts" style="border-color:#f57c00;" value="Upload">

我的jQuery代码：

$(document).ready(function() {
    $(document).on("click", ".UploadBtn", function(event) {
        $(".p").each(function(file) {
            if  ($(this).val()) {
                $(".loader").show();
                $(".spinner").show();
                $("#overlay").show();
            }
        })
    });
});

---

请注意，“p”类用于用Django编写的

{{form.photo1}}

根据

动画

和

变换

，Opera mini和非常旧版本的Safari不支持。因此，您唯一的机会就是在这些浏览器中使用JS动画，或者最好使用动画gif作为加载动画。

它不起作用

-您能更详细地描述一下吗？调试101-浏览器开发工具-控制台中的错误/警告/奇怪消息可以告诉您方法-任何没有此类工具的浏览器都不值得编写，因为我认为没有生成错误消息，因为这似乎是CSS属性的支持问题。当然，他提到的那些浏览器很旧，对于一个普通的网页来说不值得调试，但因为他明确表示，他必须支持这些浏览器……没有错误消息。页面完全渲染，但加载动画从未运行。假设在用户选择文件并单击“上载”按钮时运行，但在上载文件时，动画不会运行。另外请注意：由于

@-webkit关键帧

仅针对webkit浏览器，因此不需要

-ms

前缀属性。我使用的是Safari版本10.1.1（12603.2.4）我可能听起来像个傻瓜，但是jQuery动画能在那些浏览器中工作吗？在Safari 10.1中，它应该可以正常工作。jQuery的

animate

函数应该可以工作，但您的下一个问题是，似乎无法旋转元素（在Opera mini中）。最好回退到以gif格式加载动画。因此，简而言之，我应该放弃CSS加载程序，而只添加一个gif，它应该使用jQuery运行。最简单的方法可能是在图像元素中显示gif。如果您计划很快放弃对Opera Mini的支持，您也可以在检测到动画不工作时使用代码并显示图像。是否有办法使用jQuery在特定浏览器中运行基于CSS的动画，在其他浏览器中运行GIF？客户端要求动画必须在Opera Mini上运行，因为大多数用户都在使用该浏览器。

$(document).ready(function() {
    $(document).on("click", ".UploadBtn", function(event) {
        $(".p").each(function(file) {
            if  ($(this).val()) {
                $(".loader").show();
                $(".spinner").show();
                $("#overlay").show();
            }
        })
    });
});