元素的高度取决于页面加载

Question

我正在开发一个使用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");
                });
    });
});

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

Answer 2

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

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