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/responsive-images-how-to-prevent-reflow/

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

2 个答案: