Height check on resize causing lag

Question

I'm using the below jquery to check and reset the height of my div on resize. However, there is a terrible freeze/lag when using the below code. The structure is just three absolutely positioned divs. One at the top, one at the bottom, and one in the middle. Any idea why this might be happening?

$(window).resize(function () {
            if ($("#master_bodywrapper_div").height() < 500) {
                $("#master_bodywrapper_div").height(500);
            }
            else {
                $("#master_bodywrapper_div").height("auto");
            }
        });

Well, it *is* querying the DOM twice every time `resize` is triggered and this function called, which might be the source (DOM querying can be expensive). Note that `resize` is triggered *a lot* even if you simply grab the edge and move your mouse (with a moderate speed) 200px to one side. Try moving the `$("#master_bodywrapper_div")` query to above the `resize` callback, cached in a `var`, and then use that var reference in your callback function. — ajp15243, Sep 19 '13 at 17:59
@MilchePatern Hah, yes, I was just distracted by work and wasn't sure I'd make it answer-worthy. — ajp15243, Sep 19 '13 at 18:12

score 2 · Accepted Answer · answered Sep 19 '13 at 18:00

This is because, on some browsers, the resize event can fire dozens of times per second. You should have a resizing function that is called only after the window is done being resized, like so:

(function($) {
    var resizeTimer = false;

    function doResize() {
        if ($("#master_bodywrapper_div").height() < 500) {
            $("#master_bodywrapper_div").height(500);
        }
        else {
            $("#master_bodywrapper_div").height("auto");
        }
        resizeTimer = false;
    }

    $(window).on("resize", function() {
        if (resizeTimer) {
            clearTimeout(resizeTimer);
        }
        resizeTimer = setTimeout(doResize, 300);
    });
})(jQuery);

Hope this helps!

score 1 · Answer 2 · answered Sep 19 '13 at 18:14

Well, it is querying the DOM twice every time resize is triggered and this function called, which might be the source (DOM querying can be expensive). Note that resize is triggered a lot even if you simply grab the edge and move your mouse (with a moderate speed) 200px to one side. Try moving the $("#master_bodywrapper_div") query to above the resize callback, cached in a var, and then use that var reference in your callback function.

var div = $("#master_bodywrapper_div");

$(window).resize(function () {
        if (div.height() < 500) {
            div.height(500);
        }
        else {
            div.height("auto");
        }
    });

Height check on resize causing lag

2 Answers2