2

私はJqueryを初めて使用しますが、次の問題があります。

アスペクト比を保ちながら画像のサイズを変更する関数を作成しました。読みやすくするために、このバージョンでは必要以上の「if」があります。html構造はそのようなものです。

<div class="post">
    <div class="date"></div>
    <div class="thumbnail">
        <img class="img-thumb" />
    </div>
    <div class="post-body">
        <p>...</p>
        <img />
        <p>...</p>
    </div>              
</div>

サイズ変更の場合（パディングを追加して画像を中央に配置します。コードのその部分に間違いはないと思います。）

$(window).load(function() {
    var parentWidth  = 250;//max width. In the real script i get the parent width inside the each but for the example a static value is ok
    var parentHeight = 196;//max height

    $('.img-thumb').each(function () {
        var img=$(this);
        var width  = img.width(); //image width
        var height = img.height(); //image height
            var aspect = width/height;
            var wide = width/parentWidth;
            var tall = height/parentHeight;

        if(width > parentWidth) { 
                if (wide > tall) { 
                    width  = parseInt(parentWidth,10);
                    height = parseInt(parentHeight/aspect,10);
                }
            }
            if(height > parentHeight) {
                if (tall > wide) {
                    height = parseInt(parentHeight,10);
                    width  = parseInt(parentWidth*aspect,10);
                }
            }
            margin_top  = parseInt((parentHeight - height) / 2,10);
            margin_left = parseInt((parentWidth  - width ) / 2,10);

            img.css({'margin-top' :margin_top  + 'px',
                     'margin-left':margin_left + 'px',
                        'height'     :height   + 'px',
                        'width'      :width    + 'px'
                        });
    });
});

そして、これが私の問題です。負荷がどのように機能するのか正確にはわかりません。つまり。これは機能しますが、すべての画像が読み込まれた場合にのみ機能します。しかし、2つの問題があります。1つ目は、すべてが読み込まれるのを待つ必要があることです。2つ目は、ユーザーにサイズ変更が表示されるため、最初に画像を非表示にして、show（）で表示する必要があります。私はcssでそれを行うことができますが、この方法でjavascriptが無効になっている場合でも非表示になるので、jqueryで行うことを好みます。

私はその前に2番目の.eachを実行し、それらをすべて非表示にすることができますが、同じことのためにそれぞれを実行する2回目のdomに行くことは最善の解決策ではないと思います。では、負荷はどのように正確に機能しますか？

たとえば、これを行う場合：

$('.img-thumb').each(function () {

    var parentWidth  = 250;//max width. In the real script i get the parent width inside the each but for the example a static value is ok
    var parentHeight = 196;//max height
    var img=$(this);
    img.hide();
    img.load(function() {
        var width  = img.width(); //image width
        var height = img.height(); //image height
            var aspect = width/height;
            var wide = width/parentWidth;
            var tall = height/parentHeight;

        if(width > parentWidth) { 
                if (wide > tall) { 
                    width  = parseInt(parentWidth,10);
                    height = parseInt(parentHeight/aspect,10);
                }
            }
            if(height > parentHeight) {
                if (tall > wide) {
                    height = parseInt(parentHeight,10);
                    width  = parseInt(parentWidth*aspect,10);
                }
            }
            margin_top  = parseInt((parentHeight - height) / 2,10);
            margin_left = parseInt((parentWidth  - width ) / 2,10);

            img.css({'margin-top' :margin_top  + 'px',
                     'margin-left':margin_left + 'px',
                        'height'     :height   + 'px',
                        'width'      :width    + 'px'
                        }).show();
    });
});

動作しません。私はまだサイズ変更を見ることができることを意味します。その理由は、最初の画像が読み込まれる前に、各ループの2番目の部分が実行されないためだと思います。では、ロードコードの範囲外を実行するようにjqueryに指示するにはどうすればよいですか？それぞれ2つ必要ですか？

4

2 に答える 2

1

問題は、実際にすべての要素を「$（window）.load（...）」でロードするときにロードイベントをバインドすることです。

HTML domをダウンロードするときにloadイベントを画像にバインドしたいが、画像のサイズを変更して、画像が読み込まれた後に表示したい。したがって、

「$（window）.load（...）」の代わりに「$（document）.ready（...）」を使用し、$（'。img-thumb'）に「$（」としてロードイベントを指定します。 img-thumb'）。load（..） "; すべての画像に「img-thumb」クラスがあるため、それぞれを使用する必要はありません。この場合、サイズ変更操作を行うloadイベントが発生します。

于 2012-10-20T19:38:52.660 に答える
0

そして、これが私の問題です。負荷がどのように機能するのか正確にはわかりません。つまり。これは機能しますが、すべての画像が読み込まれた場合にのみ機能します

jQueryは、DOMが完全に読み込まれると機能を開始します。そのため、すべてのアクションがユーザーに表示されます。を呼び出すと$(document).ready();、実際には、ページの読み込みが完了するまで待ってから必要なアクションを実行するようにjQueryに指示しています。

今、あなたの質問に答えるために：

私が正しく理解していれば、ページに表示したいサイズよりも大きい画像があり、jQueryを使用して必要なサイズを指定していますか？

  1. CSSページがレンダリングされているときに画像を非表示にするために使用できます。ロードが完了したら、jQueryを使用してサイズを変更し、画像を再び表示することができます。この例を参照してください：http：//jsfiddle.net/CYfma/

  2. なぜあなたはこれをしたいのですか？ここで行う最善の方法は（事前に目標のサムネイルサイズを知っている場合）、サイズ変更済みの画像を保存することです。これは、Facebookや他の多くのWebサイトが帯域幅を節約するために使用する概念です。大きな画像をレンダリングしてクライアント側でサイズを変更しても、重量は小さくなりません。これは、ページの読み込み速度に大きな影響を与えます。

  3. 事前にターゲットサイズがわかっている場合は、CSSまたはHTMLの画像のwidthプロパティとheightプロパティを使用して、目的のサイズにすることもできます。

編集

無効にされたjavascriptについてのあなたの懸念に応えて、これは私の提案です：

を使用する代わりに、 （まだjqueryではない）を使用して画像を非表示にするCSSことができます。javascriptこれは、JavaScriptを有効にすると、jQueryが起動するまで画像が非表示になることを意味します。私の理解と観察によれば、のような行document.getElementById("image").style.display="none";は、コードが内部でブロックされる前に実行する必要があります$(document).ready();。私はその解決策を試しました、あなたはここでそれをチェックすることができます：http: //jsfiddle.net/CYfma/1/

私はあなたの質問を正しく理解したことを願っています、そうでなければ、私は心からお詫び申し上げます:-)

それが役に立てば幸い

于 2012-10-20T19:27:28.280 に答える