0

Webサイトの単純な画像サイズ変更を行うカスタムjQueryプラグインを作成しました。ここにサイトがあります：http ：//www.daemondeveloper.com/photography/gallery.php

ご覧のとおり、デバッグの目的で、ポートレート画像の不透明度を0.5、ランドスケープ画像の不透明度を1にしました。このカスタムプラグインを使用して、画像をポートレートまたはランドスケープに分類します。

(function($) {

$.fn.superFit = function(options) {

    var $this = $(this);
    var parent = $this.parent();
    var parentW = parent.width();
    var parentH = parent.height();
    var imgW = $this.width();
    var imgH = $this.height();

    var imgRatio = imgH / imgW;
    var parentRatio = parentH / parentW;



        if(imgRatio < parentRatio) //We have a landscape image
        {
            //First set the height of image to be 100%;
            $this.css('height', '100%');
            imgW = $this.width();
            parentW = parent.width();

            //Now center the image
            $this.css('margin-left', -(imgW/2)+(parentW/2));

        }else{ //We have a portrait image
            $this.css('width', '100%');
            $this.css('opacity', '0.5');
        }



}
    })(jQuery);

ポートレート画像を親の幅いっぱいに表示したいのですが、親の下部からはみ出します。これは正常に機能しているようです。ただし、横向きの分類が必要なパノラマ画像（2つあります）は、jQueryによって縦向きとして表示されています。つまり、ページを更新するまでです。[ギャラリー]メニュー項目をクリックするか、[更新]をクリックすると、プラグインが突然機能し、横向きの画像が不透明度1になり、必要に応じて親がいっぱいになるのを確認できます。

では、ページを再度更新した後にのみjQueryが起動する原因は何ですか？写真の読み込み方などと関係があるのではないかと思います。

最後に、プラグイン関数を実行するコードは次のとおりです。

$('#gallery ul li').each(function() {
var $frame = $(this).children('div');

    var fw = $frame.width();
    var fh = $frame.height();
    $frame.children('img').superFit(); 

});

これはdocument.readyで実行されています

更新：実際に更新またはF5を使用しても、問題は修正されません。何らかの理由で、[ギャラリー]メニュー項目をクリックするか、アドレスバーにフォーカスしてEnterキーを押すと、機能します...

4

1 に答える 1

3

写真の読み込み方などと関係があるのではないかと思います。

はい、画像を読み込む前に画像のサイズを取得することはできません。更新時に、画像はDOMreadyの前にキャッシュからロードされます。

代わりに、.load()イベントをフックします。

于 2012-08-01T16:32:15.017 に答える