Бесконечная прокрутка 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/заикание (не хочу использовать слово глюк снова, позволяет сохранить его зарезервирован для исходной задачи) в движении всех изображений, если вы заметили, и Я предполагаю, что это, вероятно, потому, что мы слишком быстро оживляем все это. Передача в скорость, как 100 или 200, разрешает это, но это на самом деле не решение, потому что в идеале вы должны вставить любое значение , и оно должно просто производить плавные анимации из него.

Я работаю над тем же, но до этого, я хочу знать, поможет ли это исправление для сбой, и мы, наконец, с этим справились? Дай мне знать.

Update:

Вот my version, что я говорил ранее, для вашего сведения.

Потому что все, что вы пытаетесь сделать, это образы цикла в очень линейной моды, я, например, не вижу необходимости полагаться на animate() функции JQuery. Существует API requestAnimationFrame, который я использовал вместо этого. Фактически, на моей демонстрации ниже я полностью отказался от jQuery в пользу ванильного JavaScript только потому, что я постоянно находил альтернативы почти всем, что нам нужно было делать в этой демонстрации. Но, конечно, это тоже очень субъективный вопрос; a вкус вещь; поэтому, если вы хотите пойти с jQuery, то непременно.

Другое фундаментальное изменение, которое я принес, а не обновление значений top, я прибегал к обновлению значений translateY.

Посмотрите на это jsFiddle и дайте мне знать, если оно соответствует вашим потребностям.

JavaScript код, который, как Belows:

// [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();