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事件在内容加载之前触发

回答

相关问题