个人中心
gpt4 book ai didi

javascript - 图片上传时可以显示吗？

转载 作者：太空宇宙 更新时间：2023-11-04 11:04:48 24 4
gpt4 key购买 nike

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

在我遇到的答案中，它们似乎都暗示了这里发布的答案的一些变体: How to show Page Loading div until the page has finished loading

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

这对我来说似乎最适合描述我在尝试实现已提供的任何解决方案时遇到的问题。

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

我可以看到在页面加载后实现对服务器的 Ajax 调用按预期工作；并且我还可以看到Update Panels等的实现，方便局部页面的渲染，进一步辅助针对性的效果。我只是不明白，也无法让它在页面初始加载“期间”工作。

我错过了什么？

在脚本标签中:

<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 在该阶段的早期呈现可能有所帮助？

目前我只是在推测，但不幸的是，在这种情况下，如果不是不可能的话，我将非常难以使用现有代码来说明问题。

不过，我会看看能否在原型(prototype)中模拟等待时间并在此处发布代码；前提是结果相同。

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

更新

好消息是我实际上可以在按比例缩小的原型(prototype)中成功地模拟这个问题。不幸的是，坏消息是发布的唯一答案并不能解决问题。我“认为”答案可能在纯 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>

最佳答案

你可以这样做，在页面加载时创建一个动态 div 并将其推送到文档中，当页面加载时将其从页面中删除:

// 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.
};
<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=''>

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

关于javascript - 图片上传时可以显示吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34065847/

24 4 0
文章推荐： c++ - OpenGL 3/GLFW 空白视口(viewport)
文章推荐： python - 广度优先树生成的问题
文章推荐： python 如何使用时间模块生成许可证
文章推荐： python - 无法让 wx.BufferedDC 绘制任何东西
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com