Question

我的网站上堆满了许多正在进行的（循环播放的）javascript动画，只有当它们出现在视口中时才会运行，以便保存性能。

实现这一目标有什么廉价技巧吗？关于如何在这种特殊情况下保存性能的想法非常受欢迎。

我试过这样，但不起作用。可能是因为triggerEffect变为true时未触发该功能：

var triggerEffect = false;

$(window).scroll(function(){

  var wScroll = $(window).scrollTop(),
      divTop = $('#effect-div').offset().top-$(window).height(),
      divBottom = $('#effect-div').offset().top+$('#effect-div').height();

  if (wScroll > divTop && wScroll < divBottom) {
    triggerEffect = true;
  } else {
    triggerEffect = false;
  }

});

$(document).ready(function loop() {
  setTimeout( function () {
    $("#effect-div").css("background-color", "blue")

    setTimeout(function () {
      $("#effect-div").css("background-color", "red")
    }, 200);
    if ( triggerEffect == true ) {
      loop();
    };

  }, 400);

});

完整代码（包括html和css）在CODEPEN

上查看

Answer 1

我认为你应该在文件就绪功能中移动滚动功能，所以最后它应该是这样的：

    var triggerEffect = false;

    jQuery(document).ready(function(){
       jQuery(window).scroll(function(){

      var wScroll = $(window).scrollTop(),
          divTop = $('#effect-div').offset().top-$(window).height() / 1.2,
          divBottom = $('#effect-div').offset().top+$('#effect-div').height() / 1.2;

          console.log("wScroll "+wScroll);
          console.log("divTop "+divTop);
          console.log("divBottom "+divBottom);

      if (wScroll > divTop && wScroll < divBottom) {
        triggerEffect = true;
        loop();
      } else {
        triggerEffect = false;
      }

      console.log("triggerEffectSCROLL "+triggerEffect);

    });
    });

function loop() {
      console.log("triggerEffectLOOP "+triggerEffect);
      setTimeout( function () {
        jQuery("#effect-div").css("background-color", "blue")

        setTimeout(function () {
          jQuery("#effect-div").css("background-color", "red")
        }, 200);
        if ( triggerEffect == true ) {
          loop();
        };

      }, 400);

    }

    body {
      height: 3000px;
    }

    #effect-div {
      height: 300px;
      width: 500px;
      background-color: red;
      margin-top: 1000px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="effect-div">
</div>

仅在视口中运行动画

1 个答案: