javascript - JQuery resize performance issue -
i built slider moves left or right if items hidden. needs work responsively, using resize (smartresize) function check when browser resized. works, after resizing when click more (right arrow) takes 2-5 seconds calculate hidden , execute.
can explain me why happening, , how possibly fix it?
thanks!
$(window).smartresize(function () { var cont = $('#nav-sub-menu-2 .container'); var ul = $('#nav-sub-menu-2 ul'); var li = $('#nav-sub-menu-2 ul li'); var amount = li.length; var width = li.width(); var contwidth = cont.width(); var ulwidth = width * amount; var remainder = ulwidth - contwidth; ul.width(ulwidth); if(remainder <= 0) { $('.more, .less').fadeout(); } else { $('.more').fadein(); } $('.more').click(function() { ul.animate({ 'right' : remainder }); $(this).fadeout(); $(".less").fadein(); }); $('.less').click(function() { ul.animate({ 'right' : 0 }); $(this).fadeout(); $(".more").fadein(); }); }).smartresize();
it because recalculating screen size @ every interval resizing...
try using debouncer delay function calls until everything's settled.
/* debounce resize */ function debouncer( func , timeout ) { var timeoutid , timeout = timeout || 200; return function () { var scope = , args = arguments; cleartimeout( timeoutid ); timeoutid = settimeout( function () { func.apply( scope , array.prototype.slice.call( args ) ); } , timeout ); } } $( window ).resize( debouncer( function ( e ) { /* function */ }));
Comments
Post a Comment