4

私がする必要があるのは、親 div の中心に画像を配置することだけです。
まず、これを試しました。

$(document).ready(function() { 
    $('#image1').css({
    'top': 50%, 'left': 50%,
    'margin-top': (-$('#image1').height()/2) + 'px',
    'margin-left': (-$('#image1').width()/2) + 'px'
    }); 
});

完全にダウンロードされる前に $('#image1').height() と width() が 0 になるため、失敗しました。
そのため、特定の幅と高さになるまで画像のサイズを検査し続けようとしました。
お気に入り、

function inspectSize() { return ($('#image1').width() != 0); }
function setPosition() {
    if(!inspectSize()) {
        setTimeout(setPosition, 1000);
        return;
    }
    $('#image1').css({
        'top': 50%, 'left': 50%,
        'margin-top': (-$('#image1').height()/2) + 'px',
        'margin-left': (-$('#image1').width()/2) + 'px'
    }); 
}
$(document).ready(setPosition);

それでもうまくいきません。
$('#image').width() は、IE8でダウンロードする前に28pxを返すため（ちなみにIE7は大丈夫

でした ）

$(document).ready(function() {
    $('#image1').waitForImages(function() {
         setPosition(); // without inspectSize() 
    });
});

キャッシュされた画像では正常に機能しますが、キャッシュされていない画像では機能しません。
この関数は、Image1に幅と高さが設定される前に呼び出されます。

私は何をすべきか？

4

3 に答える 3

6

load再配置コールバックをイベント ハンドラーにバインドするだけでよいはずです。

だからあなたの最後の例では：

$('#image1').load(function() {
     setPosition(); // without inspectSize() 
});

#image1画像タグを指す場所。あるいは、あなたが言及した#image1ように、それは単なるコンテナかもしれません:-

$('#image1 img').load(function() {
     setPosition();
});

jfriend00 を更新すると、JavaScript の実行時に画像がページに既に存在する場合ではなく、画像が DOM に追加されたときにのみ「読み込み」が実行されるという点で、以下の点が優れています。

両方のシナリオをカバーするには、次のようにします。

var img = $('#image1');

if (img.prop('complete')) {
     setPosition();
} else {
     img.load(function() { setPosition(); });
}

画像が既に存在する場合、チェックは true を返します。prop('complete')存在しない場合は、'load' イベント ハンドラーをバインドします。

于 2011-12-23T08:02:54.230 に答える
1

内部に同じコードを書いてみてください。

$('window').load(function() {
    // Your code here..
});
于 2011-12-23T08:06:48.047 に答える
1

簡単な例は、load イベントを画像にバインドすることです。私は常に次のことを行います

<img data-src="image.jpg" />

srcまだ属性を設定していないことに注意してください

$(function() {
    $("img").each(function() {
        $(this).load(function() {
            alert('ready to call $(this).width()');
        }).prop("src", $(this).prop("data-src"));
    });
});

load イベントがバインドされた後の.prop("src", $(this).prop("data-src"));セットの新しい src

于 2011-12-23T08:02:11.830 に答える