Question

我已经尝试了已经存在的示例但是当我点击按钮时加载图像或gif没有显示这是我做过的片段。

(function (d) { 
  d.getElementById('form').onsubmit = function () {
    d.getElementById('submit').style.display = 'block';
    d.getElementById('loading').style.display = 'block';
  };
}(document));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" action="" >
  <br />  
  <input type="submit"  value="Click!" style="width:100px;" onclick="$('#loading').show();"/>
</form>
<div id="loading" img src="loading.gif" alt="" />Loading!</div>

Answer 1

你可以这样做 -

默认隐藏图像。

在按钮上应用onclick（）函数 -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class="container">

    <a href="#" class="logo"></a>
    <nav class="site-nav">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a>
          <ul>
            <li><a href="#">Link 2.1</a></li>
            <li><a href="#">Link 2.1</a>
              <ul>
                <li><a href="#">Link 2.1.1</a></li>
                <li><a href="#">Link 2.1.2</a></li>
                <li><a href="#">Link 2.1.3</a></li>
                <li><a href="#">Link 2.1.4</a></li>
              </ul>
            </li>
            <li><a href="#">Link 2.1</a></li>
          </ul>
        </li>
        <li><a href="#">loooooong</a>
          <ul>
            <li><a href="#">Link 3.1</a></li>
            <li><a href="#">Link 3.2</a></li>
            <li><a href="#">Link 3.3</a></li>
            <li><a href="#">loooooooooooooooooong</a></li>
            <li><a href="#">Link 3.5</a></li>
          </ul>
        </li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
        <li><a href="#">Link 7</a>
          <ul>
            <li><a href="#">Link 7.1</a></li>
            <li><a href="#">Link 7.2</a></li>
            <li><a href="#">Link 7.3</a>
              <ul>
                <li><a href="#">Link 7.3.1</a></li>
                <li><a href="#">Link 7.3.2</a></li>
                <li><a href="#">loooooooong</a></li>
                <li><a href="#">Link 7.3.4</a></li>
                <li><a href="#">Link 7.3.5</a></li>
              </ul>
            </li>
            <li><a href="#">Link 7.4</a></li>
            <li><a href="#">Link 7.5</a></li>
          </ul>
        </li>
        <li><a href="#">Link 8</a></li>
      </ul>
    </nav>

  </div>
</header>

这是一个样本

$("button").click(function () {
//SHOW LOADER HERE
$("LOADER_IMG").show();

// YOUR FUNCTIONALITY

// Hide your loader
$("LOADER_IMG").hide();
});

$("#start-loader").click(function() {
  $("#loader-gif").show();
  setTimeout(function() {
    $("#loader-gif").hide();
  }, 5000);
});

#loader-gif {
  display: none;
 }

如果我使用jQuery和html单击按钮，则显示加载图像

1 个答案:

这是一个样本