Question

我有一个HTML格式的对象，我想根据php请求的返回进行更改。

例如：

<img id="UpdateIMG1" src="on.jpg">

根据PHP请求的响应，它将更改为＆＃34; off.jpg＆＃34;。我这样做每一秒。但是，有太多不必要的流量。我只想在图像/文本/复选框，...对用户可见时才这样做。

jQuery.appear似乎做了我想要的。但它并没有像预期的那样发挥作用。如果元素在页面上可见，则运行脚本。如果我滚动它会停止脚本。但是，如果它是可见的并且我打开一个新页面（显示在另一个上面），则脚本不会停止。

以下是有效的代码：

//UPDATE WHEN VISIBLE FOR IMG
//Update on first start

window.onload = function() {
    $.force_appear();

    interval1 = setInterval(function() {

                                      $.force_appear();
                }, 100);

};


$(function() {
  var intervals = [];
  $("[id^='UpdateIMG']").appear();
  $('.page-content').on('appear', "[id^='UpdateIMG']", function(event, $all_appeared_elements) {
                      var appeared = $(this).attr("id");
                      <!-- Ensures it only triggers once per ID -->
                      if (!intervals[appeared]) {
                      $.get('https://localhost/' + appeared + '.php', function(data) {
                            $('#'+appeared).attr('src', data);
                            });
                      intervals[appeared] = setInterval(function() {
                                                        $.get('https://localhost/' + appeared + '.php', function(data) {
                                                              $('#'+appeared).attr('src', data);
                                                              });
                                                        }, 1000);
                      }
                      });
  <!--Cancel when element is invisible-->
  $('.page-content').on('disappear', "[id^='UpdateIMG']", function(event, $all_disappeared_elements) {
                      var disappeared = $(this).attr("id");
                      clearInterval(intervals[disappeared]);
                      intervals[disappeared] = "";
                      });
  });

所以它几乎完美无缺，但我的想法已经不多了...... 任何帮助表示赞赏。

Answer 1

是的，您可以通过offsetParent属性或getComputedStyle方法检查可见性。看到这个答案

Check if element is visible in DOM

仅在用户可见时更新元素（IMG）

1 个答案: