jQuery.appear根本不起作用

Question

誰能看到為什么這個html代碼不起作用。

當用戶看到圖像時，它應該顯示警報，當用戶看不到圖像時，它應該再次顯示警報。

它也不適用於本地庫。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="https://raw.githubusercontent.com/morr/jquery.appear/master/jquery.appear.js"></script>

<script>
      var intervals = [];
      $("[id^=light]").on('appear', function(event, $all_appeared_elements) {
          alert("appeared");
      });

      $("[id^=light]").on('disappear', function(event, $all_disappeared_elements) {
          alert("disappeared");
      });

          </script>

      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Incandescent_light_bulb.svg/200px-Incandescent_light_bulb.svg.png" align="center" id="LichtStatus" style="height:10vh">

  </body>
</html>

Answer 1

嘗試這樣。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.js"></script>

      <script>
      $(function(){
      $("#LichtStatus").on('appear',function() {
       alert("appeared");
      });
      $("#LichtStatus").on('disappear', function() {
         alert("disappeared");
      });
      $("#LichtStatus").appear();
      });

      </script>

      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Incandescent_light_bulb.svg/200px-Incandescent_light_bulb.svg.png" align="center" id="LichtStatus" style="height:10vh">

  </body>
</html>

檢查插銷的工作示例

https://plnkr.co/edit/YbBNxsWNFc4vP3OEBeCm

當您向下滾動並且圖像進入視口內部時，警報將觸發；當圖像離開視口時，警報將向上滾動

Answer 2

准備將代碼放入文檔中，以確保已加載DOM。 另外，將元素指定為@Louys Patrice Bessette。 我添加了@Deep正確的appear呼叫。

 <script>    
 $(function(){
 var intervals = [];
  $("img[id^='Licht']").appear();
  $("img[id^='Licht']").on('appear', function(event, $all_appeared_elements) {
      alert("appeared");
  });

  $("img[id^='Licht']").on('disappear', function(event,$all_disappeared_elements) {
      alert("disappeared");
  });
});
</script>

我看到警報使用以上代碼顯示了兩次。 如下更改代碼后，我注意到警報沒有顯示兩次。

$(document.body).on('appear',"img[id^='Licht']", function(event, $all_appeared_elements) {
      alert("appeared");
  });

  $(document.body).on('disappear',"img[id^='Licht']", function(event, $all_appeared_elements) {
      alert("disappeared");
  });

jQuery.appear根本不起作用

問題描述

2 個解決方案

解決方案1
1 2016-11-16 14:44:13

解決方案2
0 已采納 2016-11-16 13:59:18

jQuery.appear根本不起作用

問題描述

2 個解決方案

解決方案1 1 2016-11-16 14:44:13

解決方案2 0 已采納 2016-11-16 13:59:18

解決方案1
1 2016-11-16 14:44:13

解決方案2
0 已采納 2016-11-16 13:59:18