jquery更改图像高度更改图像高度错误

Question

我在页面上有几个图像。除第一个图像外，每个图像都有一类“index_image”。我希望每个图像具有与第一个图像相同的高度。这是第一个图像：

<img alt="Image 1" id="ride_image" 
src="image-1.png"> 

这里是做影像变更的JavaScript：

<script> 
    $(document).ready(function() { 
     var image_1_height = $('#ride_image').height(); 
     alert(image_1_height); 
     $('.index_image').height(image_1_height); 
    }); 
</script> 

它是所有图像高度的变化为零，而不是第一个图像的高度。我认为这与在设置图像高度之前调用的代码有关，因为首先页面上没有图像，则出现警报，然后出现第一个图像。其余图像高度立即变为零，因此它们从不出现。

如何正确更改高度？

Answer 1

图像的高度仅在图像返回时设置，而不是在文档准备就绪时设置。

所以，当你试图在文件准备捕捉图像高度的图像还没有取，因此其高度为0。

可以使用第一图像的load()功能结合到这样，当它被装载它的高度将被设置为休息。

<script> 
    $(document).ready(function() { 
     var image_1_height = $('#ride_image').height(); 
     if (image_1_height !== 0) { 
      alert(image_1_height); 
      $('.index_image').height(image_1_height); 
     } else { 
      $('#ride_image').load(function() { 
       var image_1_height = $('#ride_image').height(); 
       alert(image_1_height); 
       $('.index_image').height(image_1_height); 
      }) 
     } 
    }); 
</script> 

工作JS小提琴：http://jsfiddle.net/nayish/ehw6ufyq/3/

由于先前装入将采取行动更快，不会触发负载功能的图像。因此，解决方案是先准备好文档，如果尚未设置（高度设置为0），那么我们将等待图像加载。问题可以在jquery load api页面的注意事项部分看到：https://api.jquery.com/load-event/。