根据页面负载的不同元素高度不同

Question

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

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

如何解决此问题？

下面是我的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/responsive-images-how-to-prevent-reflow/