0

これが話です...

寸法 1174px x 375px のコンテナー内に寸法 1174px x 660px の画像があります。コンテナにオーバーフローを非表示に設定したため、画像の高さがカットオフされ、画像の高さの 375 ピクセル分だけが表示されます。

この画像 (1174x660) をコンテナーの垂直方向の中央 (1174x 375) に配置して、画像の中心がコンテナーの中心になるようにする JavaScript 関数を作成しました。

function allFeaturesImagesResize () {
    var allFeatures = function () {
        var image = $('.all-features article img'),
            container = $('.all-features article'),
            container_height = container.height(),
            image_height = image.height(),
            container_center = .5 * container_height,
            image_center = .5 * image_height,
            center = (image_center - container_center);
            image.css('position','relative').css('bottom', center);

    }
    $(function () {
        $(window).resize(function () {
            allFeatures();
        }).resize();
    });
}

この関数のラッパーを使用してい$(document).ready(function() { //... });ますが、ページが読み込まれるたびに、関数が画像を中心点まで移動する作業を行っていることがわかります。この再配置が完了するまでペイロードを遅らせる方法はありますか?

私のサイトは流動的に反応するので、ユーザーのビューポートのサイズ (特に幅) が事前にわからないため、画像を動的に配置する必要があることに注意してください。

4

1 に答える 1

1

イベントloadの代わりに使用します。すべての画像がロードされた後にのみコードを実行する必要があることを示します。画像の読み込みが完了していなくても、DOM が読み込まれるとイベントが発生します。ready$(window).load(function(){ ... your code }ready

複数の画像を選択していることに注意してください$('.all-features article img')。これを行うimages.height()と、最初に見つかった画像の高さのみが取得されます。複数のコンテナを選択する行も同様です。

あなたのコードは、「見つかった画像ごとに行う」に変換する必要があります。$('.all-features article img').each (function(){...});

于 2013-04-21T01:38:54.703 に答える