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 に答える