如何在加载谷歌网络应用程序时显示 gif

Question

嗯，我有一个基于谷歌应用脚​​本的简单网络应用程序，我不使用 html 文件，只使用 code.gs。 这是一部分：

function doGet(e) {
...............
  html += "<center><h3 style='font : bold 1.5rem Helvetica, Arial, sans-serif;margin : 0 0 1em;'><a style='text-decoration : none;color : #a28351;position : relative;transition : all 0.25s linear;' href="+eventLink+" target='_blank'>" +eventTitle+"</a></h3>"+"<p style='font-size : 14px;margin : 0 0 1.5em;'>►Cuando?: "+start+"<br>►Donde?: "+location+"</br><br>"+description+"</br></p>"+
"<br/><a style='text-decoration : none;color : #a28351;position : relative;transition : all 0.25s linear;' href="+eventLink+" target='_blank'><img style='display : block;margin: 0 auto;//margin : 0 10px 10px 0;//max-width : 100%;//vertical-align: middle;//text-align: center;' src='"+eventPic+"' ></a><br/></center>";
   }
   }
  return HtmlService.createHtmlOutput(html);
}

这是最终结果：https://script.google.com/macros/s/AKfycbzEBQfsg6v6176fWJOpZxAxEWVW2rCQ9lGPL1RC9KZShaCeipHN/exec

但是显示内容需要将近 7 秒，并且会混淆用户并关闭窗口；所以我想在代码收费的同时显示一个 gif。

Answer 1

您需要使用doGet() 加载一些最小的HTML，然后该代码将需要具有window.onload 函数：

window.onload=function() {
  console.log("window.onload ran");
};

因此，首先将一些代码提供给客户端，然后在加载第一个 HTML 时自动运行 window.onload 函数。然后该代码在微调器仍在旋转时检索大部分 HTML。

在 window.onload 函数中，通过将一些 HTML 注入 DIV 元素来使微调器开始工作：

<div> this is a test</div>
<div id='divSpinner'></div>

<script type="text/javascript">
  window.onload=function() {
    console.log("This onload did run");
    //Start Spinner however you wish
    window.startSpinner();//Call function to start spinner
  };

  window.startSpinner = function(){
    //Code to start spinner
    //Search internet for ways to display a spinner
  };
</script>

window.onload 函数运行google.script.run API 并获取其余的 HTML 内容，将其注入页面，最后关闭微调器。

这是完整的代码：

启动 HTML：

<div id='idMainContent'> this is a test</div>
<div id='divSpinner'></div>

<script type="text/javascript">
  window.onload=function() {
    console.log("This onload did run");

    //Start Spinner however you wish
    window.startSpinner();//Call function to start spinner

    google.script.run.withFailureHandler(onFailure)
      .withSuccessHandler(injectMyContent)
      .getMainContent();

  };

  window.startSpinner = function(){
    //Code to start spinner
    //Search internet for ways to display a spinner
  };

window.injectMyContent = function(argHTML) {
  document.getElementById('idMainContent').innerHTML = argHTML;

  //Clear spinner DIV
  document.getElementById('divSpinner').innerHTML = "";
  //Hide spinner
  document.getElementById('divSpinner').style.display = 'none';

};
</script>

代码.gs

function doGet() {

  return HtmlService.createHtmlOutputFromFile('test HTML')
    .setTitle('The Name of Your Page')
    .setSandboxMode(HtmlService.SandboxMode.NATIVE);
};

function getMainContent() {
  return "<div>This is new HTML!</div>";
};

如果您想在不从文件中获取 HTML 的情况下执行此操作，您当然可以这样做，我的示例显示了从文件中获取初始 HTML。我已经对此进行了测试，并且可以正常工作。它首先显示一个微调器和一些最小的消息，然后从服务器检索更多内容，并注入到站点中。