0

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

问题是，当我在 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");
                });
    });
});
4

2 回答 2

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);
于 2012-11-20T22:49:46.360 回答
0

文档在其所有元素加载之前就已准备就绪。您在$(window).load事件中获得了正确的高度，但您正在初始化$(document).ready事件中的动画。只要把所有东西都搬进去$(window).load，你应该会很好。

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

于 2012-11-20T22:52:37.210 回答