【jQuery】 Gifを出したりしまったりする - 元祖若手のプログラミング奮闘記

app2.html

<html>
<head>
  <title>Gif TEST</title>
</head>
<body>
  <h1>Gif TEST</h1>

  <div>
    <h3>最初からDOMを用意して display: none; するパターン</h3>
    <div id="loading1" style="display: none;">
      <label>Loading Now!!</label>
      <label>これだとIEだと表示されない可能性大</label>
      <img src="loading.gif"><!-- どっかからgifを取ってきてください。。 -->
    </div>
    Check this out!!<input type="checkbox" id="checkLoad1">
  </div>

  <div>
    <h3>JSにDOMを用意させて入れたり取ったりするパターン</h3>
    <div id="loading2"></div>
    Check this out!!<input type="checkbox" id="checkLoad2">
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="app2.js"></script>
</body>
</html>

app2.js

$(function() {
  $('#checkLoad1').on('click', function(){
    if ($(this).prop('checked')) {
      $('#loading1').show();
    } else {
      $('#loading1').hide();
    }
  })

  $('#checkLoad2').on('click', function(){
    if ($(this).prop('checked')) {
      var load_tmp = "<label>Loading Now!!</label>" +
        "<img src=\"loading.gif\">";

      $('#loading2').append(load_tmp).show(); // 意外とshowが大事だったりする。
    } else {
      $('#loading2').empty();
    }
  })
})