元素的不同高度取决于页面加载答案

【问题标题】：Different height of element depending on page load元素的不同高度取决于页面加载
【发布时间】：2012-11-20 22:03:08
【问题描述】：

我正在开发一个使用 jQuery 来实现仿列效果的网站。这是一个测试页面：http://goo.gl/IL3ZB。左边黄色的<aside> 高度在java 脚本中设置为.body_container div 的高度。高度设置正确。

问题是当我在 Firefox 17 中进行完全刷新 (Shift + F5) 时，<aside> 正确显示，高度正确，但 js 中的动画看到的高度要小得多。当我然后正常刷新页面时，java脚本也会看到正确的高度。

我该如何解决这个问题？

这是我的 js：

var floating_patents_bottom = 0;


$(window).load(function(){
    $('.floating_patents').height( $('.body_container').height()  );
    floating_patents_bottom = ($('.body_container').height() > floating_patents_bottom ? $('.body_container').height() : floating_patents_bottom);
    var toBottom = {
        'top': floating_patents_bottom
    };
});

var toTop = {
    'position': 'absolute',
    'top': '500px',
    'display': 'none'
};

$(document).ready(function(){
    $('.floating_patents').height( $('.body_container').height()  );
    floating_patents_bottom = ($('.body_container').height() > floating_patents_bottom ? $('.body_container').height() : floating_patents_bottom);
//    floating_patents_bottom = $('.floating_patents').height();

    var toBottom = {
        'top': floating_patents_bottom
    };

    var patents = $(".floating_patents img");
    patents.css(toTop);

    patents.each(function(index) {
        $(this).delay(index * 5000).css('margin','10px auto').fadeIn("slow").animate(toBottom , 15000, function(){
            $(this).fadeOut("slow");
                });
    });
});

【问题讨论】：

多次调用 $('.body_container').height() 是没有意义的。每次调用它时，浏览器都必须搜索 DOM 以获取值……它会进行多次搜索而不是一次搜索

标签： javascript jquery html css dimensions

【解决方案1】：

问题在于，当调用处理程序$(document).ready 时，您的内容中的图像未完全加载并且尺寸为零，因此您的$('.body_container').height() 计算不正确（当浏览器从缓存中获取图像时，计算有时会正确发生）。最简单的解决方案是将所有代码移动到 $(window).load 处理程序中。

一些重构的代码将起作用：

function floatingPatents() {
    // find required elements in DOM
    var patentsBlock = $('.floating_patents'), bodyContainer = $('.body_container');
    var patents = patentsBlock.find('img').hide();
    var floating_patents_bottom = 0;

    // wait for complete page load
    $(window).load(function(){
        // resize holder
        floating_patents_bottom = bodyContainer.height();
        patentsBlock.height( floating_patents_bottom );

        // calculate offsets
        var toTop = {
            position: 'absolute',
            top: '500px',
            display: 'none'
        };
        var toBottom = {
            top: floating_patents_bottom
        };

        // start animation
        patents.show().css(toTop).each(function(index) {
            $(this).delay(index * 5000).css('margin','10px auto').fadeIn("slow").animate(toBottom , 15000, function(){
                $(this).fadeOut("slow");
            });
        });
    });
}

// run code when page ready
$(floatingPatents);

【讨论】：

谢谢，代码有效。两个答案都是正确的。由于代码示例，我选择了一个。

【解决方案2】：

文档在其所有元素加载之前就已准备就绪。您在$(window).load 事件中获得了正确的高度，但您在$(document).ready 事件中初始化了动画。只需将所有内容移至 $(window).load 即可。

如果等待窗口完成加载的时间过长（否则，您将无法获得 .body-container div 的正确高度），您可以尝试这种技术来获取占位符图像，以便在它们实际加载之前流程是正确的。 http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/

【讨论】：