コンテンツがロードされる前にonloadイベントが起動する

Question

img-wrapperの高さを幅の80％にしようとしています。以下のコードは、ウィンドウのサイズを変更するときに発生し、正しく機能します。問題は、関数が正しい幅の値を取得しないことです。代わりに、幅は100になるため、高さは80pxとして計算されます。

サイトではブートストラップを使用していますが、ポラロイド写真のように見えるカードを作ろうとしています。イメージラッパーは標準の幅と高さの比を持つ必要があり、イメージ自体はラッパー内に格納する必要がありますが、イメージの幅と高さの比率が正しいかどうかはわかりません。

ほぼ-作業JS：

fixSize = function() { 
    $('.card-img-wrapper').each(function() { 
     width = $(this).width(); 
     height = width * 0.8; 
     $(this).height(height); 

     // Hiding the loader wheel 
     $(".loader").hide(); 

     // Showing hidden elements to avoid flickering and resizing 
     $(this).parent().removeClass("hide"); 
    }); 
} 

$(window).on('load', fixSize); 
$(window).resize(fixSize); 

HTML

<!-- This is within PHP foreach loop --> 
<div class="col-md-4"> 
    <a class="float-left wh100" href="p_info.php?pID=<?php echo($p['ID']); ?>"> 
     <div class="card hide"> 
      <div class="card-img-wrapper"> 
       <img src="<?php echo($p['imagepath']); ?>"> 
      </div> 
      <h3><?php echo($p['name']); ?></h3> 
      <p>Price: <?php echo($p['price']); ?> €</p> 
     </div> 
    </a> 
</div> 

CSS

/* Helper Classes */ 

.float-left { 
    float: left; 
} 

.wh100 { 
    width: 100%; 
    height: auto; 
} 

.hide { 
    visibility: hidden; 
} 


/* Card */ 

.card { 
    width: 100%; 
    margin-bottom: 30px; 
    padding: 30px; 
    overflow: hidden; 
} 

.card-img-wrapper { 
    width: 100%; 
    height: 25vh; 
} 

.card-img-wrapper img { 
    width: auto; 
    height: auto; 
    max-width: 100%; 
    max-height: 100%; 
    display: block; 
    margin: 0 auto; 
} 

Answer 1

jQueryのドキュメントレディ機能であなたのfixSize機能をラップします。

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

Answer 2

私はresize機能を考えると、あなたのコンテンツがロードされる前にそのため、あなたのfixSize機能は、ページのロード時にすぐに呼ばれるかもしれません。代わりにこれを試してください。

$(window).on('load', function() { 
    fixSize(); 
    $(window).resize(fixSize); 
}); 

@ mister-positiveは、ドキュメントレディ機能でコードをラップすることも推奨します。