在 SharePoint 2013 页面中加载 gif答案

【问题标题】：Loading gif in a SharePoint 2013 page在 SharePoint 2013 页面中加载 gif
【发布时间】：2021-01-05 17:37:59
【问题描述】：

预期的功能是：在按钮单击时，下载 PPT（这来自外部站点的 REST 调用），在下载 PPT 的同时，页面中应显示加载 gif 并且它PPT下载后应该停止。我试过 setTimeout() 函数，但在这种情况下它似乎不能正常工作。是否可以通过 jQuery 或 javascript 来实现？任何帮助将不胜感激！

【问题讨论】：

标签： javascript jquery sharepoint

【解决方案1】：

我的测试代码：

<img src="/_layouts/15/images/loading16.GIF" style="display: none;" id="img">
<input type="button" value="download" id="download">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/sprestlib@1.8.0/dist/sprestlib.min.js"></script>
<script>
  $("#download").click(function(){
    $("#img").css("display","");
    sprLib.file('Doc/Presentation.pptx').get()
      .then(function (blob) {
        var url = (window.URL || window.webkitURL).createObjectURL(blob);
        var link = document.createElement("a");
        link.setAttribute("href", url);
        link.setAttribute("download", _fileName);
        link.style = "visibility:hidden";
        document.body.appendChild(link);
        link.click();
        setTimeout(function () { document.body.removeChild(link); }, 500);
      }).then(function(){
        $("#img").css("display","none");
      });
  })    
</script>

测试结果：

【讨论】：

是否可以在 setTimeout(function()) 中动态设置时间？因为 ppt 生成随我要求的项目选择而变化。
setTimeout 方法删除创建的元素，它不控制gif的显示时间。第二种then方法，下载完成后gif被隐藏。