时间戳

首页 > 解决方案 > 在非 Firefox 浏览器上按顺序加载动画图形（微调器）

javascript - 在非 Firefox 浏览器上按顺序加载动画图形（微调器）

问题描述

我有一个我正在制作的网页，其中一个特定功能按照 Firefox 的设计工作，但在 Chrome、Edge 或 Opera 中却没有。它是一个 html 微调器，位于某个弹出式 div 上，其特征在 CSS 中定义如下：

#popupspinner {
    display: none;
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top: 8px solid gray;
    width: 40px;
    height: 40px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

在某个时刻，我试图展示这个微调器，然后等待其他一些 javascript (Ajax) 函数处理，然后关闭微调器。我的 javascript 是这样的：

function dostuff()
{
     popupspinner.style.display = "block";

     doingmorestuff1();
     doingmorestuff2();
     doingmorestuff3();

     popupspinner.style.display = "none";
}

问题是，在 Firefox 中，微调器像宣传的那样工作。当用户单击按钮调用 dostuff() 函数时，微调器显示，然后其他函数运行，然后微调器消失。

然而，在其他所有浏览器中，微调器直到domorestuffX() 函数完成后才会启动。我花了一段时间才这样做，但最终当我注释掉 popupspinner.style.display = "none" 行时我明白了这一点。微调器确实显示了，只是在调用其他函数之后才启动。

换句话说，在这些其他浏览器中，它的运行就像代码是这样的：

function dostuff()
{
     doingmorestuff1();
     doingmorestuff2();
     doingmorestuff3();

     popupspinner.style.display = "block";
     popupspinner.style.display = "none";
}

由于这两行代码紧挨着彼此并且仅相隔几毫秒，因此实际上微调器根本不会出现。

我不知道，但我猜这是其他浏览器为了运行得更快而做的事情（？？？）

我的问题是，有没有办法强制这些其他浏览器以正确的顺序运行代码？

编辑：这是完整的代码部分：

function getPropertyInfo()
{
    popupspinner.style.display = "block";

    setTimeout(function() {
        getCoords();
        getBasicInfo();
        getAscendLegal();
        getOwners();
        getValues();
        getPhotos();
        getElectedOfficials();

        popupspinner.style.display = "none";

        document.getElementById("tab1").className = "nav-link active";
        document.getElementById("tab2").className = "nav-link";
        document.getElementById("tab3").className = "nav-link";
        document.getElementById("tab4").className = "nav-link";
        document.getElementById("tab5").className = "nav-link";
        basicvalueinfo.style.display = "block";
        ownership.style.display = "none";
        photos.style.display = "none";
        requests.style.display = "none";
        electedofficials.style.display = "none";
        document.getElementById("container-all").style.display = "block";
    });
}

标签： javascriptcssasynchronousbrowserspinner

解决方案

我认为这个问题可能与等待暂停的 DOM 样式更改重复

问题是你的doingmorestuffX函数阻塞了浏览器的主线程——所以没有资源可以刷新应用了新样式的页面。

最简单的解决方案是在超时后运行代码，这样浏览器就有时间重新呈现样式更改。请看下面更正后的示例：

function dostuff()
{
     popupspinner.style.display = "block";

     setTimeout(function() {
          doingmorestuff1();
          doingmorestuff2();
          doingmorestuff3();

          popupspinner.style.display = "none";
     });
}

使用浏览器上方的代码：

  • 将block样式应用于popupspinner元素，
  • 超时后运行的队列函数，
  • 呈现应用了样式更改的页面（微调器变为可见），
  • 从超时队列运行函数，
  • 应用none样式，
  • 呈现页面（微调器消失）。

推荐阅读