$(window).resize() is being sluggish

Question

I've got a photo slideshow with thumbnails. Next/Previous buttons appear and disappear based on the size of the window; if the thumbnails overflow the window size, the buttons appear. If not, they disappear. My problem is that, at times, they won't come up, or they won't come up for a couple of seconds. At other times they won't disappear. Sometimes it works fine.

I am still pretty new to jQuery and JavaScript. Any suggestions?

    // hide previous and next buttons
$('#prev, #next').hide();

// get width of thumbnail list
var thumbsWidth = $('div#thumbs ul').width();

// show/hide next/prev buttons
function buttonVisibility() {
    if (thumbsWidth + 225 > screenWidth) {
        $('#prev, #next')
        .fadeTo('fast', 0.5)
        .hover(function(){
            $(this).fadeTo('fast', 1);
        }, function(){
            $(this).fadeTo('fast', 0.5);
        });
    } else {
        $('#prev, #next').fadeTo('fast', 0, function(){
            $(this).hide();
        });
    }
}

// declare global screenWidth variable
var screenWidth

// find width of thumbnail window and show/hide next/prev buttons accordingly
function findWidth(){
    screenWidth = $('div#thumbs').width();
    buttonVisibility();
}

// perform findWidth() on load and on window resize
findWidth();
$(window).resize(function(){
    findWidth();
});

Answer 1

Calculate screenWidth once upon load, so you don't have to search for div#thumbs over and over.

Answer 2

Create a variable displayed which stores the current state of whether the buttons are visible or not. Now in the resize event you only do fadeIn if they are hidden.

Also you can store the selected elements in order not to do the selection every time.

// hide previous and next buttons
$prevNext = $('#prev, #next');
$prevNext.hide();

// get width of thumbnail list
var $thumbs = $('#thumbs');
var thumbsWidth = $('#thumbs ul').width();
var screenWidth;
var displayed = false;

// show/hide next/prev buttons
function buttonVisibility() {
    if (thumbsWidth + 225 > screenWidth) {
        if (!displayed) {
            displayed = true;
            $prevNext.fadeTo('fast', 0.5).hover(function () {
                $(this).fadeTo('fast', 1);
            }, function () {
                $(this).fadeTo('fast', 0.5);
            });
        }
    } else if (displayed) {
        displayed = false;
        $prevNext.fadeTo('fast', 0, function () {
            $(this).hide();
        });
    }
}

// find width of thumbnail window and show/hide next/prev buttons accordingly
function findWidth() {
    screenWidth = $thumbs.width();
    buttonVisibility();
}

// perform findWidth() on load and on window resize
findWidth();
$(window).resize(findWidth);

​

Answer 3

It might be that the work the browser intrinsically has to do while the window is resized (that is, re-figure the layout in response to the changing window size), added to the DOM changes you're making, is just bogging things down. What you might try is waiting for the user interaction to finish before triggering your code.

$(window).resize((function() {
  var timeout = null;
  return function() {
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(findWidth, 250);
  };
})());

That'll change things so that your code won't try and do anything until 1/4 second after the user pauses or stops dragging the window around.

Answer 4

The frequency in which the onresize event is fired seems to be inconsistent across browsers. You may need to implement a custom mechanism to control the timing.