jQuery.appear在用户可见的情况下运行脚本

我想使用此脚本在元素可见时每秒运行一次命令，直到它消失。 https://github.com/morr/jquery.appear jQuery.appear在用户可见的情况下运行脚本

但是，我错过了一本手册，该示例也没有帮助我。

从页面：

$('someselector').appear(); // It supports optinal hash with "force_process" and "interval" keys. Check source code for details.

我认为这将是最适合这个工作的代码片段？

我的目标是在元素ID变为可见时立即替换元素的来源。

$.get('https://localhost/LightRoom1.php', function(data) { $('#LightRoom1').prop('src', data); });

这应该在＃LightRoom1变为可见状态时每秒完成一次，并在不可见时停止。

有多个以＃Light *开头的元素。所以id必须被传递到路径和id选择器中。

任何帮助或建议表示赞赏，谢谢你提前。

来源

2016-11-15 davinci

文档http://morr.github.io/appear.html – madalinivascu

是的，不幸的是我无法改变它以适应我的需求。 – davinci

像这样的东西？

var $myDiv = $('#LightRoom'); 

// Bind handler for the 'appear' event 
$myDiv.on('appear', function() { 
    // element appeared, execute your code 
}); 

// Bind handler for the 'disappear' event 
$myDiv.on('disappear', function() { 
    // element disappeared, execute your code 
});

希望这会有所帮助。

来源

2016-11-15 08:21:44 JasonK

我认为你必须使用事件侦听器：

$('someselector').on('appear', function(event, $all_appeared_elements) { 
    // this element is now inside browser viewport 
}); 
$('someselector').on('disappear', function(event, $all_disappeared_elements) { 
    // this element is now outside browser viewport 
});

和jQuery通配符选择，如“[ID^=的Lightroom]”选择任何ID开始 “的Lightroom”。然后，你必须设置的时间间隔与javascript函数的setInterval（）重复代码每n秒，清除它，当元素消失使用clearInterval（）

检查这些代码可以帮助您：

var intervals = []; 
$("[id^=LightRoom]").on('appear', function(event, $all_appeared_elements) { 
// create an interval to repeat action every 1 second 
// and store it inside interval array using id as key 
var appeared = $(this).attr("id"); 
intervals[appeared] = setInterval(function(){ 
          $.get('https://localhost/" + appeared + ".php', function(data) { 
           $(appeared).prop('src', data); 
          }); 
         }, 1000); 
}); 

$("[id^=LightRoom]").on('disappear', function(event, $all_disappeared_elements) { 
// delete intervals for non-visible elements 
    var disappeared = $(this).attr("id"); 
    clearInterval(intervals[disappeared]); 
});

来源

2016-11-15 08:41:42

谢谢，看起来很有希望。但它还没有工作。我只是在我的js中添加了你的代码。我需要改变什么吗？ – davinci

嗯我不能使用路径中出现的变量。如果我手动设置它的作品。字符串是正确的，但... – davinci

检查是否可以在setInterval函数内看到“出现”的值。如果它是未定义的，所以你必须改变前面的代码，以使可能的传递“出现”作为函数参数。在这里你可以找到一些提示：[链接]（http://stackoverflow.com/questions/15410384/javascript-setinterval-function-with-arguments） –

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
     
 
     
 
     <br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
     <br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
     <br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
     <br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
     <br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
     <br><br><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="images/licht_off.png" align="center" id="LichtStatus" style="height:10vh"> 
 

 

 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.min.js"></script> 
 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     
 
     <script> 
 
      var intervals = []; 
 
      $("[id^=Licht]").on('appear', function(event, $all_appeared_elements) 
 
      { 
 
      // create an interval to repeat action every 1 second 
 
      // and store it inside interval array using id as key 
 
      var appeared = $(this).attr("id"); 
 
      intervals[appeared] = setInterval(function() 
 
      { 
 
       $.get('https://localhost/" + appeared + ".php', function(data) 
 
       { 
 
       $(appeared).prop('src', data); 
 
       }); 
 
       }, 1000); 
 
      }); 
 

 
       $("[id^=Licht]").on('disappear', function(event, $all_disappeared_elements) 
 
       { 
 
       // delete intervals for non-visible elements 
 
       var disappeared = $(this).attr("id"); 
 
       clearInterval(intervals[disappeared]); 
 
       }); 
 
     </script> 
 

 
    </body> 
 
</html>

当我向下滚动，它应该ç将源头吊起来，但没有任何反应。（LichtStatus.php实际上响应图像/ licht.png）

任何想法？

来源

2016-11-15 14:45:32 davinci

jQuery.appear在用户可见的情况下运行脚本

回答

相关问题