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在用戶可見的情況下運行腳本

回答

相關問題