使用 JavaScript 在点击时显示 gif 加载器答案

【问题标题】：Make gif loader show on click with JavaScript使用 JavaScript 在点击时显示 gif 加载器
【发布时间】：2013-10-17 02:07:43
【问题描述】：

我有一个 HTML 输入按钮，当它被点击时会提交一个 PHP 表单。代码如下：

<input class="rg_btn" name="submit" value="Register" type="submit" />

但是，当用户单击该按钮时，我希望它在页面中间显示加载图像 3 秒（我有 gif 文件），然后我希望表单实际处理。

我该怎么做？

就像您点击“立即购买”时 http://www.mega.co.nz/#pro 所做的一样

【问题讨论】：

您能提供更多信息吗？在此期间正在做什么？你想让它在三秒钟后消失吗？
一个onClick 事件和一个setTimeout 呼叫。非常基本的东西。
我添加了一个关于我在问题中的意思的链接

标签： javascript php html loading

【解决方案1】：

首先将图像添加到您的 html 并使用 CSS 将其隐藏：

 <img src="3sec.gif" id="gif" style="display: none;">

然后，使用 jQuery：

 $('.rg_btn').submit(function() {
     $('#gif').show(); 
     return true;
 });

如果你还没有 jQuery，也不要忘记在标题标签之间包含它：

 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

【讨论】：

非常感谢，这是可以找到的最简单的解决方案
9 年后仍然有效...谢谢！

【解决方案2】：

<input class="rg_btn" name="submit" value="Register" type="submit" onclick='btnClick' />


function btnClick() {

    var Gif = document.createElement('div');

    Gif.className = "?";

    Gif.innerHTML = "<img src='some_img' />";

    document.appendChild(Gif);


    setTimeout("btnClickfade()", 3000);

}

function btnClickfade() {

     document.removeChild(document.getElementByClassName("?"));

}

【讨论】：

虽然，我猜您可能不想以这种方式执行此操作。您可能希望使用对外部请求的引用执行 btnClick()，并在外部请求的回调中淡化 gif。

【解决方案3】：

您可以执行以下操作-

步骤 1：不要创建提交按钮，而是创建标准按钮第2步：当用户点击taht按钮时，调用一个函数让它命名为submitme

第 3 步：

在 Javascript 中：函数提交（） { //显示图像所需时间的代码 //隐藏图片并提交表单 }

【讨论】：

【解决方案4】：

为此，您必须创建一个触发 onclick 按钮的函数，该按钮使用 event.preventDefault(); 取消默认行为（提交表单），之后您将设置基本上附加一个 div 到正文，居中加载 gif（通过 CSS）这将显示 3 秒，您也可以预先插入 DIV，这样您就不必再附加它了。

有几件事我不明白，从你的问题我可以读到你想显示一个加载 gif 3 秒，这非常长，只有在那之后你才真正想要开始处理表单。

对于这种情况，我强烈建议使用 AJAX 透明地处理您的请求，例如没有页面重新加载，提交没有 3 秒延迟。

如果用户禁用了 JS，您可以使用 PHP 回退，表单会立即提交（相信我，用户不会希望等待 3 秒）

这可能是最人性化的方式，如果您对如何使用纯 JS 实现 AJAX 请求有疑问，请评论此问题，我会根据您的需要进行相应的编辑。

&dash;席德

【讨论】：