Question

我有一个链接到一个页面，其中进行了一些繁重的计算。响应可能会延迟12秒。因此，我想通过在页面上显示微调器来告诉用户计算正在进行中。

微调器适用于Windows 10，但不适用于IOS。我已经在iPad和MacBook Pro2015上使用macOS High Sierra进行了测试。

对于测试，我在运行PHP的Apache服务器上创建了这个页面。

<?php
  if (isset($_GET['wait'])) {
    sleep(12); // set script on server to sleep for 12 sec.
  }
 ?>
 <!DOCTYPE html>
 <html>
 <head>
 <title>Test IOS Spinner</title>
 <style type="text/css">
    body {
        margin: 0;
    }

    #wait {
        display: none;
        position: fixed;
        top:0;
        left:0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(224, 224, 224, 0.6);
    }

    .loader {
        position: fixed;
        top: 50vh;
        left: 50vw;
        margin: 4px auto;
        border: 4px solid blue;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
 </style>
 </head>
 <body>
    <div id="wait">
      <div class="loader">
      </div>
    </div>
    <a href="index.php?wait" onclick="testspinner()">Wait 12 secunds</a>
    <script type="text/javascript">
       function testspinner() {
           document.getElementById('wait').style.display = 'block';
       };
    </script>
 </body>
 </html>

视窗：当我运行上面的代码并单击链接时，会出现微调器在页面加载时。我已在Chrome 63，IE 11和Firefox 58中测试过它。
IOS：当我点击链接时，页面显示时不会显示微调器加载。如果我在12秒内停止加载页面，则会出现微调器。我已在Chrome，Firefox和Safari中测试过它。

当您向服务器发出请求时，IOS上的浏览器似乎无法继续使用javascript。

我在做错了什么。有解决方法吗？

/的Jesper

Answer 1

好吧，您可以尝试在发出服务器请求之前放置微调器：

<a href="index.php?wait" onclick="testspinner(event)">Wait 12 secunds</a>

现在，在testspinner：

function testspinner(event) { event.preventDefault(); document.getElementById('wait').style.display = 'block'; setTimeout(function() { // let the browser render, and navigate: window.location = 'index.php?wait'; }, 0); }

我使用了对setTimeout的调用，因此浏览器有时间在发出请求之前呈现微调器，但我不确定是否有必要。我现在可以测试一下。它可能只是直接执行window.location = ...。

在IOS中加载页面时，onclick事件中的Javascript未执行

1 个答案: