Question

当有人点击某个图标时，我想添加一个微调器来显示内容正在加载。基本上当有人点击超链接时，页面需要时间来加载，同时我想显示一个微调器/“加载图像”。如何实现？

提前致谢

我的HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="shortcut icon" type="image/x-icon" href="images/fav-icon.png" />
  <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
  <meta name="keywords" content=" my webpage" />
  </head>    
  <body>
    <div class="content">
      <div class="wrap">
        <!--- start-top-grids---->
        <div class="top-grids">
          <div class="top-grid">
            <div class="product-pic">
              <a href="http://www.example.com"><img src="img/search_page.png" title="watch" /></a>
            </div>
            <a href="directory.php">Directory</a>
          </div>
          <div class="top-grid">
            <div class="product-pic">
              <a href="http://example.com"><img src="img/news.png" title="shoe" /></a>
            </div>
            <a href="#"> News</a>
          </div>

          <div class="top-grid">
            <div class="product-pic">
              <img src="img/payment.png" title="view pay" />
            </div>
            <a href="#">View Pay</a>
          </div>
          <div class="clear"> </div>
          <div class="clear"> </div>
          <div class="clear"> </div>
          <div class="clear"> </div>
        </div>
  </body>
</html>

Answer 1

您可以尝试以下内容：
1）将“纺车”图像放在一个div中 2）添加“正在加载...”文本

当你的页面加载时，设置div显示，一旦你的页面加载成功，将div设置为display：none。

    <div id="progressIndicator" style="display: none;">
       <div style="background-color: Transparent;" >
           <img src="Images/indicator_mozilla_blu.gif" style="font-family: Tahoma; font-size: small; cursor: wait"
             align="absMiddle" alt="" />&nbsp;Loading...
       </div>
    </div>

更新

单击“图像”按钮时，请勿直接调用服务器端功能。而是调用像“CallServerSideFunction（）”这样的客户端函数，并从该函数调用服务器端函数。您可以尝试以下内容：

在Javascript函数中：

 function DisplayProgress() {
        document.getElementById('progressIndicator').style.display = '';
    }

function HideProgress() {
        document.getElementById('progressIndicator').style.display = none;
    }

function CallServerSideFunction() {
        DisplayProgress();
        document.getElementById("btnCallServerSideFunction").click();
        HideProgress();
   }

如果有帮助，请告诉我。

关于在网页中加载图像

1 个答案: