无限滚动 div 图像故障

Question

我目前正在使用以下 javascript，如下所示。当我只在 div 中放置文本时效果很好。image_scroll_3 但是一旦我插入图像，滚动就会出现故障并且不会移过图像的顶部。

如有任何建议，我们将不胜感激

JS

  <script>
  (function($, undefined) {
  $.fn.loopScroll = function(p_options) {
  var options = $.extend({
    direction: "upwards",
    speed: 60
  }, p_options);

  return this.each(function() {
  var obj = $(this).find(".image_scroll_2");
  var text_height = obj.find(".image_scroll_3").height();
  var start_y, end_y;
  if (options.direction == "downwards") {
    start_y = -text_height;
    end_y = 0;
  } else if (options.direction == "upwards") {
    start_y = 0;
    end_y = -text_height;
  }

  var animate = function() {
    // setup animation of specified block "obj"
    // calculate distance of animation    
    var distance = Math.abs(end_y - parseInt(obj.css("top")));

      //alert("animate " + obj.css("top") + "-> " + end_y + " " + distance);

    //duration will be distance / speed
    obj.animate(
      { top: end_y },  //scroll upwards
      1500 * distance / options.speed,
      "linear",
      function() {
          // scroll to start position
          obj.css("top", start_y);
          animate();    
      }
    );
  };

  obj.find(".image_scroll_3").clone().appendTo(obj);
  $(this).on("mouseout", function() {
    obj.stop();
  }).on("mouseout", function() {
    animate(); // resume animation
  });
  obj.css("top", start_y);
  animate(); // start animation

  });
  };
  }(jQuery));

  $("#example4").loopScroll({ speed: 700 });
  </script>

Answer 1

我认为问题在于您的 text_height 是在图像实际加载到 .image_scroll_3 元素之前计算的。所以你需要等待图片加载。

将你的 loopScroll 调用放在 $(window).load 中，如下所示：

$(window).load(function(){
    $('#example4').loopScroll({speed:700});
});

那个巨大的故障现在应该消失了，因为上面的修复应该有助于缓解它。

不过还是有些不想要的jank / stutter（不想用glitch这个词 再次，让我们将其保留用于初始问题）如果您注意到所有图像的移动，我猜这可能是因为我们对整个事物进行动画处理的速度太快了。像 100 或 200 一样传入 speed 可以解决这个问题，但这并不是真正的解决方案，因为理想情况下，您应该能够输入任何 speed 值，它应该会产生流畅的动画效果。

我正在做完全相同的事情，但在此之前，我想知道上面针对故障的修复是否对您有帮助，我们终于完成了吗？让我知道。

更新：

这是我之前提到的 my version，供您阅读。

因为您所做的只是以非常线性的方式循环图像，我个人认为不需要依赖 animate() 函数jQuery。我已经利用了 requestAnimationFrame API。事实上，在我下面的演示中，我完全放弃了 jQuery 而转而使用 vanilla JavaScript 只是因为我一直在寻找替代品来替代我们在这个演示中需要做的几乎所有事情。但是当然，这也是一个非常主观的事情；品味的东西；所以如果你想使用 jQuery，那么无论如何。

我带来的另一个根本性改变是更新 top 值，而不是更新 translateY 值。

看看这个 jsFiddle 并告诉我它是否符合您的需要。

JavaScript 代码如下：

// [http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/]
window.requestAnimFrame=(function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(callback){window.setTimeout(callback,1000/60);};})();
var main=null;
var imageScroll2=null;
var imageScroll3=null;
var totalHeight=null;
var initY=null;
var destY=null;
var currY=null;
var increment=null;
var direction=null;
var UP=null;
var DOWN=null;
var isPlaying=null;
function init(){
    main=document.getElementById('example4');
    imageScroll2=main.getElementsByClassName('image_scroll_2')[0];
    imageScroll3=main.getElementsByClassName('image_scroll_3')[0];
    totalHeight=imageScroll3.clientHeight;
    UP='upwards';
    DOWN='downwards';
    isPlaying=true;
    direction=UP;
    increment=10;
    if(direction===DOWN){
        initY= -totalHeight;
        destY=0;
    }else{
        initY=0;
        destY= -totalHeight;
    }
    currY=initY;
    imageScroll2.appendChild(imageScroll3.cloneNode(true));
    if(imageScroll2.addEventListener){
        imageScroll2.addEventListener('mouseover',function(){isPlaying=false;},false);
        imageScroll2.addEventListener('mouseout',function(){isPlaying=true;},false);
    }else{
        imageScroll2.attachEvent('onmouseover',function(){isPlaying=false;});
        imageScroll2.attachEvent('onmouseout',function(){isPlaying=true;});
    }
    requestAnimFrame(render);
}
function render(){
    if(isPlaying){
        imageScroll2.style.transform='translate(0px,'+currY+'px)';
        if(direction===DOWN){
            currY+=increment;
            if(currY>=destY){currY=initY;}
        }else{
            currY-=increment;
            if(currY<=destY){currY=initY;}
        }
    }
    requestAnimFrame(render);
}
//
init();

无限滚动 div 图像故障

Infinite scrolling div glitching with images

javascript

jquery

jquery-animate