Performance issue with multiple instances

[IGx89]

Hello! First off, I wanted to say how grateful I am for you making this plugin -- it's exactly what I've been looking for, a modern thumbnail scroller that functions well on mobile devices and in responsive layouts. Wanted to bring to your attention though a performance issue I've discovered: CPU usage gets progressively higher the more instances of the scroller there are on a page. I have a page with 15 of them and it completely pegs one of my CPU cores.

The issue appears to be with the 60ms setTimeout that the updateOnContentResize option (and a couple others) use. It uses about 3ms of CPU time on my machine every time it's called, and with 15 instances of the scroller that means there's hardly any time where the CPU isn't working.

Not sure what the best solution is, though for the moment I've changed the timeout from 60 to 600ms and that's brought my CPU usage down to ~5%. Not ideal, but good for now. I'm not super familiar with jQuery, but maybe there could be some resize event handlers you'd be able to use instead to get the same behavior?

[malihu]

Hello and thanks for the feedback :)

Indeed the advanced options (updateOnContentResize and updateOnImageLoad) that automatically update multiple scrollers (e.g. 10 or 15) can be heavy on the CPU.

The adjustment you did on the timeout will work depending on the overall functionality of the page. There are pages/web apps where this might not be the best solution (e.g. when you need fast updates) but if it works for your project it's good.

The plugin offers the option to disable all auto-update functionality (by setting both options to false) and call the update method manually when needed. This might be the best solution when having many scrollers on a single page.

For example:

$(window).load(function(){
    $(".my-scroller").mThumbnailScroller({
        advanced:{
            updateOnContentResize:false,
            updateOnImageLoad:false,
        }
    });
}).resize(function(){
    $(".my-scroller").mThumbnailScroller("update"); //updates scrollers on browser resize
});

You could call $(".my-scroller").mThumbnailScroller("update"); on browser resize (as above), as a callback on a jquery animation function (e.g. after fading-in your element), after some CSS3 transition on the element, after adding/removing images from a scroller etc.

Hope this helps