javascript - Infinite scrolling div glitching with images -

i'm using following javascript shown below. it's working when place text within div .image_scroll_3 insert images scroll glitches , won't move past top of image.

any advice appreciated

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 distance / speed     obj.animate(       { top: end_y },  //scroll upwards       1500 * distance / options.speed,       "linear",       function() {           // scroll 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>  

i think problem text_height calculated before images loaded inside .image_scroll_3 elements. you'll need wait images load.

put loopscroll call inside $(window).load so:

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

that massive glitch should gone fix above should have helped mitigate it.

however, there still unwanted jank / stutter (don't want use word glitch again, lets keep reserved initial problem) in movement of images if notice , guessing because animating whole thing fast. passing in speed 100 or 200 resolves not solution because, ideally, should able put in speed value , should produce smooth animations out of it.

i working on same thing before that, want know if above fix glitch helps , done it? let me know.

update:

here my version spoke of earlier, perusal.

because trying loop images in linear fashion, i, one, not see need rely on animate() function of jquery. there requestanimationframe api have leveraged instead. in fact, in demonstration below have abandoned jquery in favour of vanilla javascript because kept finding alternatives pretty needed in demo. of course, subjective matter; taste thing; if want go jquery, means.

another fundamental change brought rather updating top values, have resorted updating translatey values.

take @ jsfiddle , let me know if fits needs.

javascript code of 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();