0

こんにちは、私のサイトを見てください。問題のコード スニペットは、css-html メソッドで運がなかったので、画像を中央に配置する必要があります。中央にロードされる場合とそうでない場合があります。ページのロード時に画像を中央に配置する方法を教えてください。

サイト: http://bit.ly/11nAQJK

<script type="text/javascript"> //Centering Script


$(document).ready(function () {
    updateContainer();
    $(window).resize(function() {
        updateContainer();
    });
});


function updateContainer() {


(function ($) {
$.fn.vAlign = function() {
    return this.each(function(i){
    var h = $(this).height();
    var oh = $(this).outerHeight();
    var mt = (h + (oh - h)) / 2;    
    $(this).css("margin-top", "-" + mt + "px"); 
    $(this).css("top", "50%");
    $(this).css("position", "absolute");    
    }); 
};
})(jQuery);

(function ($) {
$.fn.hAlign = function() {
    return this.each(function(i){
    var w = $(this).width();
    var ow = $(this).outerWidth();  
    var ml = (w + (ow - w)) / 2;    
    $(this).css("margin-left", "-" + ml + "px");
    $(this).css("left", "50%");
    $(this).css("position", "absolute");
    });
};
})(jQuery);
4

3 に答える 3

0

を使用して$(document).ready()いるため、準備ができたときに関数が実行されますが、DOM必ずしもすべての画像などが読み込まれるとは限らないため、高さと幅の情報はまだ利用できません。ページを更新すると、情報が利用可能になり、目的のものが得られます行動。

これを克服するには、 を使用します$(window).load()。これにより、ページ上のすべてが完全に読み込まれたときに関数が実行され、幅や高さなどの情報が利用可能になり、ページが最初に読み込まれたときに期待どおりの結果が得られるはずです。

または、 を使用し続ける必要がある場合$(document).ready()は、画像などの要素の寸法を明示的に指定する必要があります。これにより、DOMがロードされたときに、ブラウザはすでに寸法を認識しており、画像などの要素が完全にロードされるのを待つ必要がありません。

于 2013-06-07T06:20:07.630 に答える