CODEWITHSUNDEEP
jqueryresizewindow
Squirkle
Squirkle

Reputation: 933

$(window).resize() is being sluggish

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();
});

Upvotes: 2

Views: 1684

Answers (5)

Ascis
Ascis

Reputation: 1

En este ejemplo vemos como se ejecutara el codigo cada vez que se termine de redimensionar la ventana (In this example we see how the code is executed every time you finish resizing the window)

DEMO 1

JAVASCRIPT

$(document).ready(function ()
{
    iniciar();
});

Upvotes: 0

Ryan Kinal
Ryan Kinal

Reputation: 17732

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);

​

Upvotes: 0

Josh Stodola
Josh Stodola

Reputation: 82513

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.

Upvotes: 0

Pointy
Pointy

Reputation: 413826

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.

Upvotes: 5

mcandre
mcandre

Reputation: 24642

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

Upvotes: 0

Related Questions