JQuery画像のサイズ変更が画面全体に表示される

Question

divに合うようにプロファイル画像のサイズを変更するためのjQuery機能が追加されましたが（200px 200pxで、機能が正しいかどうかはわかりませんが）、ページを更新するたびに機能が実行されますもう一度、画面が1秒間画面全体に表示されます。どうすればこれを防ぐことができますか？ My機能：「あなたは、コールバックでそれをしなければならない」が、方法がわからない：私は言っていた答えを見つけ

$(document).ready(function() { 
    $('.profile-picture img').each(function() { 

     var width = $(this).width(); 
     var height = $(this).height(); 

     if(width > height) { 
      $(this).css("max-width", "100%"); 
      $(this).css("height", "100%"); 
     }else { 
      $(this).css("width", "100%"); 
      $(this).css("max-height", "100%"); 
     } 
    }); 
}); 

つのポストで。私に助言を与えることができますか？前もって感謝します！

Answer 1

.ready()ページがブラウザによってレンダリングされた後のイベントトリガー。記述している問題を回避するには、CSSでいくつかのデフォルトを設定する必要があります。

さらに進んで、CSSのすべてのスタイルを設定してから、代わりにJavaScriptでクラスを再生することができます。

CSS：

.profile-picture { 
    width: 200px; 
    height: 200px; 
} 
.profile-picture img { 
    width: 100%; 
    max-height: 100%; 
} 
.profile-picture img.tall { 
    max-width: 100%; 
    height: 100%; 
} 

Javascriptを：ページがあなたの `$（文書）.ready`（準備ができている）まで表示されませんので

$(document).ready(function() { 
    $('.profile-picture img').each(function() { 
    if($(this).width() < $(this).height()) { 
     $(this).addClass('tall'); 
    } 
    }); 
});