イメージを最大幅/高さに制限する方法を教えてください。

Question

今、私は次のコードを試しています。これはほとんどの場合（1回目の訪問後にリロードして）動作しますが、最初にページにアクセスしたときにイメージのサイズが正しく調整されません。 I と考えると、ページ準備完了コールバックがトリガーされる前にイメージがロードされるためです。

.ready()コールバックで直接.resize()関数を呼び出そうとしましたが、.ready()コールバックがトリガーされたときに画像が読み込まれる可能性があるため、画像のサイズが変更されません。

resize()機能を接続して、負荷がかかっても画像が適切にリサイズされるようにするにはどうすればよいですか？

function resize($img) { 
    var max_size_w = 200; 
    var max_size_h = 200; 
    var h = $img.height(); 
    var w = $img.width(); 
    if (h > max_size_h) { 
     h = max_size_h; 
     w = Math.ceil($img.width()/$img.height() * max_size_h); 
    } 
    if (w > max_size_w) { 
     h = Math.ceil($img.height()/$img.width() * max_size_w); 
     w = max_size_w; 
    } 
    $img.css({ height: h, width: w }); 
} 

$().ready(function() { 
    // Size the images correctly 
    $(".personPictureImage").each(function() { 
     $(this).find("img").load(function() { resize($(this)); }); 
    }); 
}); 

UPDATE：動作するはず HTML

<div class="personPicture"> 
    <div class="personPictureFrame"> 
     <div class="personPictureImage"> 
      <a href="../images/media/popup/46.png" class="lightbox"> 
       <img src="../images/media/thumbnail/46.png" alt=""> 
      </a> 
     </div> 
     <div class="personPictureFrameTL"></div> 
     <div class="personPictureFrameTR"></div> 
     <div class="personPictureFrameBL"></div> 
     <div class="personPictureFrameBR"></div> 
    </div> 
</div> 

Answer 1

が読み込まれているすべての画像の後にサイズを変更するウィンドウロード機能の内の関数の呼び出しを入れて私たちはあなたのHTMLの構造ですか？ `.personPictureImage`とは何ですか？

Answer 2

$(document).ready(function(){ 
function resize($img) { 
    var max_size_w = 200; 
    var max_size_h = 200; 
    var h = $img.height(); 
    var w = $img.width(); 
    if (h > max_size_h) { 
     h = max_size_h; 
     w = Math.ceil($img.width()/$img.height() * max_size_h); 
    } 
    if (w > max_size_w) { 
     h = Math.ceil($img.height()/$img.width() * max_size_w); 
     w = max_size_w; 
    } 
    $img.css({ height: h, width: w }); 
    } 

    $(".personPictureImage").each(function() { 
     $(this).find("img").load(function() { resize($(this)); }); 
    }); 

}()) 

。 、

$(window).load(function(){ 
    // Size the images correctly 
    $(".personPictureImage").each(function() { 
     resize($(this)); 
    }); 
}); 

はまた$().readyを使用して廃止されました$(function(){か$(document).ready(function(){