我想使用 php 和 jquery 在页面上创建加载功能答案

【问题标题】：I want to make a loading feature on page using php and jquery我想使用 php 和 jquery 在页面上创建加载功能
【发布时间】：2016-01-19 17:02:47
【问题描述】：

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $('img').show();
            });
        </script>
        <script>
            $(window).load(function(){
                $('img').hide();
            });
        </script>
<body>
    <img src="loading.gif" id="imgId" />
    <form method="GET" >
        <input type="submit" name="btn_test" value="Click me">
        <input type="submit" name="btn_test2" value="Click me no action">
    </form>
    <?php
        if(isset($_GET['btn_test']))
        {
            for($i=0;$i<=100000;$i++)
            {
                echo $i;
                echo "<br>";
                echo "T";
                echo "<br>";
                echo "H";
                echo "<br>";
                echo "A";
                echo "<br>";
                echo "N";
                echo "<br>";
                echo "K";
                echo "<br>";
                echo "S";
                echo "<br>";
                echo "<p>";
            }

        }

        if(isset($_GET['btn_test2']))
        {
            echo "No action....";
        }   
    ?>

    </body>

</html>

此代码正在运行，但加载图像显示在顶部。但是有什么方法可以在对话框中加载此图像，并且那个时候页面无法点击？（这样用户那时就不能做任何事情）

提前感谢您的阅读。

【问题讨论】：

只是好奇...为什么要在不同的行上输出“THANKS”100000 次？
这是一个示例代码，实际代码是从mysql获取数据，操作大约需要82秒。

标签： php jquery ajax jquery-ui

【解决方案1】：

您需要添加一些 CSS 样式到将容纳您的加载图像的元素。

例如，将加载图像的代码更改为：

<div id="loader">
    <img src="loading.gif" id="imgId" />
</div>

然后在CSS:

#loader {
  position: absolute;             /* relative to the body */
  z-index: 9999;                  /* over all other elements */
  height: 100%;                   /* full body height */
  width: 100%;                    /* full body width */
  top: 0;                         /* distance from the top */
  left: 0;                        /* distance from the left */
  right: 0;                       /* distance from the right */
  bottom: 0;                      /* distance from the bottom */
  background: rgba(0, 0, 0, 0.6); /* give it a background with low opacity */
}

img#imgId {
  position: absolute;             /* relative to the loading div */
  left: 50%;                      /* distance from the left */
  top: 50%;                       /* distance from the top */
}

然后在 JavaScript 中：

$(window).ready(function(){
    $('#loader').hide();
});

【讨论】：

你只是把图片放在中间，但是按钮和页面仍然可以点击。因此用户可以在完成执行之前一次又一次地单击相同的按钮。想想吧。
这就是#loader 元素的意义...它高于所有其他页面元素，因此它们不可点击且不可见。
是的，方法非常好，您使用的是 div 而不是 ui 对话框。但实际上对话可能会更好。