我想使用 php 和 jquery 在页面上制作加载功能 - I want to make a loading feature on page using php and jquery

I want to make a loading feature on page using php and jquery

本文关键字：功能加载 php jquery | 更新日期: 2023-09-27

<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>

此代码有效，但加载图像显示在顶部。但是有没有办法在对话框上加载此图像，并且页面当时无法单击？（这样用户当时就不能做任何事情了）

提前感谢您的阅读。

您需要

为将容纳加载图像的元素添加一些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();
});