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>

检查plunker的工作示例

https://plnkr.co/edit/YbBNxsWNFc4vP3OEBeCm

一旦向下滚动警报就会被触发，图像进入视口并在图像离开视口时向上滚动

Answer 2

将您的代码放入文档中以确保已加载DOM。同时将元素指定为@Louys Patrice Bessette。我添加了appear来自@Deep的电话。

 <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 个答案: