Question

更新：我将此添加到我的卸载功能中：

$(window).resize(function(){
        var pageheight = $(window).height();
        $('section').css('height', pageheight)
    });

它可以工作但是在调整窗口大小时性能非常好。有什么建议吗？

我有一个页面。有两个区域，标题和＆amp;部分。两者都是页面高度的100％（在页面加载时，这很重要）。当您单击“开始”按钮时，它们都会向上移动。标题被隐藏，部分进入视野。

这一切都是通过jQuery在页面加载时获取页面高度来完成的。因此它运行良好，直到您调整浏览器窗口大小，然后一切都关闭，因为变量“页面高度”已更改。如何保持页面高度变量不断更新，以便我调整浏览器窗口的大小，它是否响应？

以下是网站：http://hashtraffic.com/

点击“开始”以查看滚动效果。

这是jQuery：

jQuery.fn.center = function (absolute) {
    return this.each(function () {
        var t = jQuery(this);

        t.css({
            position:   absolute ? 'absolute' : 'absolute', 
            left:       '50%', 
            top:        '50%', 
            zIndex:     '99'
        }).css({
            marginLeft: '-' + (t.outerWidth() / 2) + 'px', 
            marginTop:  '-' + (t.outerHeight() / 2) + 'px'
        });

        if (absolute) {
            t.css({
                marginTop:  parseInt(t.css('marginTop'), 10) + jQuery(window).scrollTop(), 
                marginLeft: parseInt(t.css('marginLeft'), 10) + jQuery(window).scrollLeft()
            });
        }
    });
};

$(function(){
    var pageheight = $(window).height();
    $('section, header').css('height', pageheight)
    $('h1').delay(500).fadeTo(1000, 1);
    $('h2').delay(1000).fadeTo(1000, 1);
    $('h3').delay(1500).fadeTo(1000, 1);
    $('section').delay(500).fadeTo(1000, 1)
    $('hgroup').center();
    $('p').center()
    $('h3').click(function(){
        $('hgroup').animate({marginTop: -2*pageheight}, 300);
        $('section').animate({marginTop: -pageheight}, 300);
        $('p').delay(4000).fadeOut(function() {
            $(this).text("The internet is both the most powerful #interconnectivity mechanism we have, and is the crux of our #collectiveintelligence.").fadeIn()
            $(this).delay(4000).fadeOut(function(){
                $(this).text("It's also the fastest growing industry in the world. Earlier this year, the number of internet ads surpassed the number of printed ads. That's huge.").fadeIn()
                $(this).delay(4000).fadeOut(function(){
                    $(this).text("It's also the fastest growing industry in the world. Earlier this year, the number of internet ads surpassed the number of printed ads. That's huge.").fadeIn()
                    $(this).delay(4000).fadeOut(function(){
                        $(this).text("It's also the fastest growing industry in the world. Earlier this year, the number of internet ads surpassed the number of printed ads. That's huge.").fadeIn()
                        $(this).delay(4000).fadeOut(function(){
                            $(this).text("It's also the fastest growing industry in the world. Earlier this year, the number of internet ads surpassed the number of printed ads. That's huge.").fadeIn()
                            $(this).delay(4000).fadeOut(function(){
                                $(this).text("It's also the fastest growing industry in the world. Earlier this year, the number of internet ads surpassed the number of printed ads. That's huge.").fadeIn()
                            });
                        });
                    });
                });
            });
        });
    });
});

CSS：

* {
    margin: 0;
    padding: 0;
}
body {
    background: #FFF;
    overflow: hidden;
}
header {
    text-align: center;
    top: 50%;
    height: 100%;
    width: 100%;
}
h1 {
    font: 300 10em Anivers;
    text-shadow: 3px 3px 0 #FFF;
    position: relative;
    opacity: 0;
}
h2 {
    font: 300 3.5em Anivers;
    text-shadow: 3px 3px 0 #FFF;
    opacity: 0;
}
h3 {
    font: 300 3.5em Anivers;
    text-shadow: 3px 3px 0 #FFF;
    opacity: 0;
    cursor: pointer;margin-top: 75px;
    position: relative;
    left: 50%;
    margin-left: -75px;
    font: 100 3em Anivers;
    width: 150px;
    border: 4px solid #000;
    -webkit-border-radius: 30px;
}
p {
    font: 300 1.5em Anivers;
    text-align: center;
    position: relative !important;
    width: 800px;

}
section {
    height: 100%;
    width: 100%;
    opacity: 0;
}

Pageheight我猜测需要是一个百分比值，但你不能使用jQuery为百分比值设置动画，所以我有点傻。

谢谢！

Answer 1

如果你真的关心性能，我会强烈推荐Ben Almans Throttle / Debounce插件。它们的设计正是为了这个目的。

可以在http://benalman.com/projects/jquery-throttle-debounce-plugin/

找到插件

Ben继续解释调整大小事件如何在某些浏览器中持续激活，这会极大地影响性能。

在示例页面上：http://benalman.com/code/projects/jquery-throttle-debounce/examples/throttle/您可以看到“限制”调整大小事件的结果

Answer 2

$(window).resize(function(){
    var pageheight = $(window).height();
    $('section').css('height', pageheight)
});

解决了它！它只是在调整窗口大小时重新更新页面高度。性能问题是由Safari中的错误引起的。清除缓存，重新启动浏览器，顺利运行！

感谢@nnnnnn和@SagarPatil

如何使这个jQuery效果响应？

2 个答案: