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/。