2

我正在使用下面的 jquery 在调整大小时检查和重置 div 的高度。但是,使用以下代码时会出现可怕的冻结/滞后。该结构只是三个绝对定位的 div。一个在上面,一个在下面,一个在中间。知道为什么会发生这种情况吗?

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

2 回答 2

2

这是因为,在某些浏览器上,resize 事件每秒可以触发数十次。您应该有一个仅在调整窗口大小后才调用的调整大小函数,如下所示:

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

希望这可以帮助!

于 2013-09-19T18:00:45.713 回答
1

好吧,它每次resize触发两次查询 DOM 并调用此函数,这可能是源(DOM 查询可能很昂贵)。请注意,resize即使您只是抓住边缘并将鼠标(以中等速度)移动到一侧 200 像素,也会触发很多。尝试将$("#master_bodywrapper_div")查询移动到 resize 回调上方,缓存在 var 中,然后在回调函数中使用该 var 引用。

var div = $("#master_bodywrapper_div");

$(window).resize(function () {
        if (div.height() < 500) {
            div.height(500);
        }
        else {
            div.height("auto");
        }
    });
于 2013-09-19T18:14:26.430 回答