更新

Question

我已经看到很多变化来回答这个问题，而其中许多显然是基于反馈为其他人工作的;它们都不适合我。

在我遇到的答案中，他们似乎都建议在这里发布一些答案： How to show Page Loading div until the page has finished loading

我相信我遇到的问题可能是我不了解如何在页面的生命周期完成之前在页面上呈现任何内容？

这似乎对我来说最有意义的是描述我试图实施已经提供的任何解决方案的问题。

在每个实例中，包含我的加载图像的div在完全加载页面后显示为时已晚。

我可以看到实现在页面加载后按照预期的方式对服务器进行Ajax调用;我还可以看到更新面板等的实现，以便于部分页面呈现，以进一步帮助实现目标效果。我只是不明白也无法让它“工作”，而“正在发生页面的初始加载。”

我错过了什么？

在脚本标签中：

<script>
    showProgress();
    function ShowProgress() {
    $('.loading').show();
};
</script>

身体标签正下方：

<body>
   <div class="loading">
    Loading...
      <img src="../Images/spinner.gif" width="200" height="200" />
   </div>
</body>

这是我执行的最基本和最简单的实现，但div仅在每个实例中完成页面加载后加载。

我尝试过其他几种排列，但它们都会产生相同的结果。

所以我的问题是，加载指示器是否可以在加载的同一页面上实现。到目前为止，我的努力表明答案是否定的，但也许我错过了一些关键因素。

增加：

在完成页面加载之前，正在执行服务器端的“大量”初步工作，因为我被告知这应该工作;也许实现服务器端ScriptManager在页面生命周期的早期阶段调用客户端代码可能有助于确保在阶段早期提供div可能有帮助？

我只是在这一点上进行推测，但遗憾的是，在这种情况下，即使不是不可能，也很难用现有代码提供问题的说明。

然而，我会看到我是否可以模仿原型中的等待时间并在此处发布代码;只要结果相同。

==========================

更新

所以好消息是我实际上可以在缩小的原型中成功模拟这个问题。不幸的是，坏消息是发布的唯一答案并不能解决问题。而且我“认为”答案可能会在纯HTML标记的条件下工作，但在ASP.NET中，页面呈现过程的工作方式略有不同。

这是代码。我添加了一个工作线程来模拟实际应用程序的服务器端调用等待，但是你会注意到所提出的解决方案的代码版本都不起作用。

此外，在IE上运行时，建议的答案存在一个问题。更具体地说明了IE11。

JavaScript运行时错误：无法获取未定义或空引用的属性“appendChild”发生在document.body.appendChild（div）; 虽然，我很确定这是一个IE问题;它不会在Chrome中引发错误，但也不会加载加载图像。

守则背后：

public partial class Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (PerformWork())
            return;
    }
    protected bool PerformWork()
    {
        var time = new TimeSpan(0, 0, 20);
        Thread.Sleep(time);
        return true;
    }
}

我最初发布的简单版本的标记：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
    showProgress();
    function ShowProgress() {
    $('.loading').show();
};
</script>
<body>
    <form id="form1" runat="server"> 
        <div class="loading">
            Loading...
              <img src="../Images/spinner.gif" width="200" height="200" />
        </div>
    </form>
</body>
</html>

到目前为止唯一提出的答案的标记：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
        (function () {
            var div = document.createElement('div');
            div.id = 'loader';
            div.setAttribute('style', 'position:absolute; left:0; top:0; background:white; color:red;');
            div.textContent = 'Loading...plz wait!!!'

            var loadImg = document.createElement('img');
            loadImg.src = 'http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif';
            loadImg.width = 50;
            loadImg.height = 50;
            div.appendChild(loadImg);
            document.body.appendChild(div);
        })();

        window.onload = function () {
            document.querySelector('#loader').remove();
            // when page load completes it removes the loader div.
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <img src='http://www.hd-freewallpapers.com/tpl/download.php?filename=best-high-quality-hd-wallpapers-3D-2560x1440.jpg' alt='' />
        <img src='http://www.hd-freewallpapers.com/tpl/download.php?filename=best-quality-hd-wallpapers-free-download-3D-2560x1440.jpg' alt='' />
        <img src='http://www.hd-freewallpapers.com/tpl/download.php?filename=butterfly-wallpaper-for-computer-2560x1440.jpg' alt='' />
    </div>
    </form>
</body>
</html>

Answer 1

您可以执行以下操作：在页面加载时创建动态div并将其推入文档中，当页面加载时，只需将其从页面中删除：

＆＃13;

// This IIFE will execute as soon as page is in the window. This creates a dynamic div and 
// a dynamic img with a gif src and appends it in the document.
(function() {
  var div = document.createElement('div');
  div.id = 'loader';
  div.setAttribute('style', 'position:absolute; left:0; top:0; background:white; color:red;');
  div.textContent = 'Loading...plz wait!!!'
  
  var loadImg = document.createElement('img');
  loadImg.src = 'http://downgraf.com/wp-content/uploads/2014/09/01-progress.gif';
  loadImg.width=50;
  loadImg.height=50;
  div.appendChild(loadImg);
  document.body.appendChild(div);
})();

window.onload = function() {
  document.querySelector('#loader').remove();
  // when page load completes it removes the loader div.
};

＆＃13;

<img src='http://www.hd-freewallpapers.com/tpl/download.php?filename=best-high-quality-hd-wallpapers-3D-2560x1440.jpg' alt=''>
<img src='http://www.hd-freewallpapers.com/tpl/download.php?filename=best-quality-hd-wallpapers-free-download-3D-2560x1440.jpg' alt=''>
<img src='http://www.hd-freewallpapers.com/tpl/download.php?filename=butterfly-wallpaper-for-computer-2560x1440.jpg' alt=''>

＆＃13;

此处window.onload将确保已加载页面的每个元素。

可以在上传图像时显示图像吗？

更新

1 个答案: