onload事件在內容加載之前觸發

我試圖讓我的img-wrapper高度爲其寬度的80％。下面的代碼會在我調整窗口大小時觸發並正常工作，問題是函數無法獲得正確的寬度值。相反，寬度取爲100，因此高度計算爲80px。onload事件在內容加載之前觸發

該網站正在使用bootstrap，我正在試圖製作看起來有點像寶麗來照片的卡片。圖像包裝需要具有標準的寬高比，圖像本身需要包含在包裝內，但我無法確定圖像是否具有正確的寬高比。

將近-工作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; 
}

來源

2016-11-09 Petri

如果您將圖片設置爲固定大小div的背景，並根據您的需要使用'background-size：contains'或'background-size：cover'，可能會更容易。這樣做意味着圖像的w/h比率無關緊要，並且也不需要JS代碼 –

由於您使用jQuery，因此在jQuery文檔中包裝fixSize函數調用.Ready函數 –

裹在jQuery的文件準備好功能你fixSize功能。

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

來源

2016-11-09 14:31:23

我覺得resize功能，因此您的fixSize功能可能會在頁面加載立即打電話，之前你的內容是加載。試試這個。

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

由於@ mister-positive建議將您的代碼包裝在文檔就緒函數中也可能是一個好主意。

來源

2016-11-09 14:34:59 Iwazaru

onload事件在內容加載之前觸發

回答

相關問題