如何使用jquery(Chrome、Safari..)获取图像大小

Question

我是jquery的初学者，需要通过jquery获取图像的高度。这是我使用的代码：

$(document).ready(function ($) { 
  var height = $('#testor').height();
   $('.slider-container').css("height", height);
});

这是html代码：

<div class="slider-container">
<button type="button" id="slider-left">Left</button>
<button type="button" id="slider-right">Right</button>
<div class="slider-image" ><img src="http://xxxx.jpg"   class="alignnone size-medium wp-image-1558 testor" id="testor"  /></div>
<div class="slider-image"><img src="http://xxx.jpg"  class="alignnone size-medium wp-image-1557 testor" /></div>
<div class="slider-image"><img src="http://xxx.jpg"  class="alignnone size-medium wp-image-1556 testor" /></div>
</div>

和css：

.slider-image {
position: absolute;
width: 100%;
}
.slider-image img{
width: 100%;
height: auto;
}
.inline-block {
display: inline-block;
}
.slider-container {
position:relative;
width: 100%;
overflow: hidden;
}
#slider-left {
position: absolute;
top: 50%;
z-index: 1;
}
#slider-right {
position: absolute;
top: 50%;
right: 0;
z-index: 1;
}

它在Firefox和IE上运行良好，但在Chrome和Safari上则不然。我发现这是webkit浏览器的问题。

通常建议使用$(window(.load而不是$(document(.ready，但这也不起作用。

有人知道怎么解决吗？我试了两天才找到解决方案，但现在不知道该怎么办。

最佳收益Mythos

Answer 1

$(document).ready(function ($) { 
  var myimage = document.getElementById("testor");
  var w = myimage.width;
  var h = myimage.height;
//Assign the variable to your jquery css
$(".slider-container").css("height",h);
});

JSfiddle

Answer 2

将load事件附加到.ready()处的<img>元素；在load事件处理程序中调用.height()，因为如果在load事件完成之前调用.height()，则元素可能未完全加载，并且可能返回0

.slider-image {
  position: absolute;
  width: 100%;
}
.slider-image img {
  width: 100%;
  height: auto;
}
.inline-block {
  display: inline-block;
}
.slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}
#slider-left {
  position: absolute;
  top: 50%;
  z-index: 1;
}
#slider-right {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
  $(document).ready(function($) {
    $('#testor').on("load", function() {
      var height = $(this).height();
      console.log(this.complete);
      alert(height);
      $('.slider-container').css("height", height);
      console.log(".slider-container height:",
                  $('.slider-container').css("height"));
    })
  });
</script>
<div class="slider-container">
  <button type="button" id="slider-left">Left</button>
  <button type="button" id="slider-right">Right</button>
  <div class="slider-image">
    <img src="http://lorempixel.com/100/100/" class="alignnone size-medium wp-image-1558 testor" id="testor" />
  </div>
  <div class="slider-image">
    <img src="" class="alignnone size-medium wp-image-1557 testor" />
  </div>
  <div class="slider-image">
    <img src="" class="alignnone size-medium wp-image-1556 testor" />
  </div>
</div>