动画可以在 Chrome 上运行，但不能在 Safari 上运行

Question

处理项目上传时，我的 js 脚本启用动画加载以及计时器启动和更新。在 Safari 上，当网站缓慢上传文件并重定向到

"/upload"

时，这两个元素都不会刷新。在 Chrome 上，这两个元素都完美刷新。我很确定这是页面如何缓慢重定向的问题，因为 js 应该在该过程中更新。代码如下所示。感谢您的帮助！

上传表格

// Load function

var loadingIcon = document.querySelector('.load');
loadingIcon.style.display = 'flex';
loadingIcon.classList.add('spin-animation');

var time = 0;
var interval = setInterval(function() {
  time += 0.01;
  timer.textContent = time.toFixed(2) + " seconds";
}, 10);

<form method="post" enctype="multipart/form-data" action="/upload">
  <br>
  <div class="file-upload">
    <label for="upload" class="file-upload">Upload</label>
    <input type="file" name="pdf-file" class="file-upload" id="upload">
  </div>

  <h1 class="text-timer" id="timer"></h1>

  <br><br>
  <button type="submit" onclick="load()">Submit</button>
</form>

Answer 1

对我来说它适用于 safari，也许你必须监听

submit

事件而不是

click

？

document.querySelector("#form").addEventListener("submit", (e) => load(e))

function load(e) {
  var loadingIcon = document.querySelector('.load');
  var timer = document.querySelector('#timer');
  loadingIcon.classList.add('spin-animation');

  var time = 0;
  var interval = setInterval(() => {
    time += 0.01;
    timer.innerText = time.toFixed(2) + " seconds";
  }, 10);
}

 .load {
   border-radius: 50%;
   border: 0.25rem solid #D3D3D3;
   border-top-color: #000;
   width: 80px;
   height: 80px;
   display: none;
 }

 .spin-animation {
   display:flex;
   -webkit-animation: spin 1s linear infinite;
   animation: spin 1s linear infinite;
 }

 @-webkit-keyframes spin {
   0% {
     -webkit-transform: rotate(0deg);
   }

   100% {
     -webkit-transform: rotate(360deg);
   }
 }

 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }

   100% {
     transform: rotate(360deg);
   }
 }

<form method="post" id="form" enctype="multipart/form-data" action="/upload">
  <br>
  <div class="file-upload">
    <label for="upload" class="file-upload">Upload</label>
    <input type="file" name="pdf-file" class="file-upload" id="upload">
  </div>
  <div class="load"></div>
  <h1 class="text-timer" id="timer">timer</h1>

  <br><br>
  <button type="submit">Submit</button>
</form>