如何使用 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 上却不行。 发现是webkitbrowser的问题。

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

有没有人知道如何解决它。我试了两天想找到解决办法，现在不知道该怎么办。

最好的问候 神话

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 事件附加到<img> 元素.ready()；在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>