Question

我有一个滑块，因为有一个图像容器li我正在显示li取决于幻灯片计时。我的问题是，如果我首先找到图像高度或li高度，它不会显示在chrome和opera中（只有一段时间）。如何解决这个问题。

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
注意：在小提琴中它的工作正常，一旦我将它复制到我的本地并经过镀铬或歌剧，那就不会了。

Answer 1

试试这个

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

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

问题是：

在li完全加载

之前，您获得image高度

Answer 2

您需要在html正文中定义高度，如下所示：demo

html,body{height: 100%;}

Answer 3

由于某种原因，您只能在加载文档后获得实际高度，并在页面上显示对象。单击按钮后，我添加了一个按钮和一个事件来检查高度。

我已更新您的小提琴here

您需要在$（文档）加载并准备就绪后获得高度。

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

});

图像的高度没有通过chrome和opera中的jquery height（）

3 个答案: