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

Question

嗯，我有一个基于 google 应用程序脚本构建的简单 Web 应用程序，我不使用 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 秒，这会让用户感到困惑并关闭 window；所以我想在代码收费时显示一个 gif。

Answer 1

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

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

因此，首先向客户端提供一些代码，然后 window.onload 函数会在第一个 HTML 加载时自动运行。然后该代码会在微调器仍在旋转时检索大部分 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>

Code.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。我已经对此进行了测试，并且有效。它首先显示一个微调器和一些最小的消息，然后从服务器检索更多内容，并注入站点。

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

How can i display a gif while a google web app loads

html

google-apps-script

HTML 启动:

Code.gs