图像高度没有通过在铬和歌剧jQuery高度（）

我有一个滑块，有一个图像容器li我显示li取决于幻灯片时间。我的问题是，如果我首先找到图像高度或li高度，那么它不会在铬和歌剧中显示（只有一段时间）。如何解决这个问题。图像高度没有通过在铬和歌剧jQuery高度（）

HTML

<!DOCTYPE html> 
<html> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
<title>demo slider</title> 
<link href="sample.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="js/jquery.min.js"></script> 
</head> 
<body> 

<div class="SlideStoryHome"> 
<div class="slider"> 
     <ul class="sliderWrapper"> 
      <li> 
       <div class="slidepart1"> 
        <a href="#"> 
         <img src="img/slideshow_1.jpg" alt="one" /> 

        </a> 
       </div> 
       <div class="slidepart2"> 
        demo heading 
       </div> 
      </li>   
     </ul> 
    </div> 
</div> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('ul.sliderWrapper li').first().addClass('active'); 
    var xyz = $('.sliderWrapper li').height(); 
    alert(xyz); 

}); 

</script> 
</body> 

</html>

CSS

ul, li,body { 
    margin:0; 
    padding:0; 
    border:0; 
    outline:0; 
    font-size:100%; 
    vertical-align:baseline; 
    background:transparent; 
} 
.SlideStoryHome { 
    float: left; 
    width: 500px; 
    height: auto; 
    padding: 0px; 
    margin: 0px 0px 10px 0px; 
} 
.slider{ 
    width: 100%; 
    height: auto; 
    position: relative; 
    overflow: hidden; 
    float: left; 
    background: #303030; 
} 
ul.sliderWrapper { 
    top:0px; 
    left:0px; 
    margin-left: 0px; 
    margin-top: 0px; 
    width: 100%; 
    height: auto; 
    position: relative; 
    overflow: hidden; 
} 
ul.sliderWrapper li { 
    float: left; 
    position:absolute; 
    left:0px; 
    width: 100%; 
    height: 100%; 
    background: #303030; 
    list-style: none; 
} 
ul.sliderWrapper li.active { position: relative; } 
ul.sliderWrapper li img{ 
    width: 100%; 
    height: auto; 
    float: left; 
} 
.slidepart1{ 
    height: auto; 
    width: 100%; 
    float: left; 
    background: #303030; 
    position: relative; 
    overflow: hidden; 
} 
.slidepart2{ 
    background-color:#ccc; 
    background-position: left bottom; 
    background-repeat: repeat-x; 
    bottom: 0; 
    opacity: .6; 
    display: block; 
    height: auto; 
    left: 0; 
    padding-bottom: 10px; 
    position: absolute; 
    width: 100%; 
} 
.displayNone{display: none; }

我创造了这个click here
音符filddle：在拨弄它的正常工作，一旦我复制这对我的地方并穿过镀铬或歌剧，然后它不会。

来源

2014-02-06 RDX RaN

试试这个

$(".sliderWrapper li img").load(function() { 
var xyz = $('.sliderWrapper li').height(); 
    alert(xyz); 
    })

演示：http://jsfiddle.net/A5j4N/4/

问题是：

你得到li高度前image完全加载

来源

2014-02-06 05:47:27 rynhe

很好...它是一个很酷的解决方案，它的工作很好，谢谢rynhe :) –

欢迎!!!!! :) – rynhe

你需要定义HTML身体的高度是这样的：demo

html,body{height: 100%;}

来源

2014-02-06 05:32:13

它仅在第一次工作，当我刷新页面显示g高度= 0. –

使用$（window）.resize（function（）{$（'html，body'）.css（'height'，'100％'）}）; –

没有它第二次没有工作。 –

出于某种原因，该文件已加载，并且对象被显示在网页上后，你只能得到实际高度。点击按钮后，我添加了一个按钮和一个事件来检查高度。

我已经更新了你的提琴here

您需要$（文件）后，得到高度已被加载并准备。

$(document).ready(function(){ 
    $('#btn').click(function(){ 
     var xyz = $('.sliderWrapper li').height(); 
     alert(xyz); 
    }); 

});

来源

2014-02-06 05:37:36 Ahmad

它会工作，但我不能有一个事件来获得高度后，我想要做一个'数学'计算显示一些其他值的高度。 –

图像高度没有通过在铬和歌剧jQuery高度（）

回答

相关问题