Bootstrap Как проверить, было ли изменено изображение?

Question

Я использую загрузочную строку с изображениями в ней. Размеры этих изображений изменяются при изменении окна браузера, так что есть ли какой-либо прослушиватель событий, который срабатывает при изменении размера изображения? Я хочу, чтобы он использовал, чтобы получить ширину изображения. Я попытался это:

$(window).load(function() { 
    $('img.product-thumbnail').resize(function(){ 
     alert($('img.product-thumbnail').width()); 
    }); 
}); 

и мои IMG теги: всего

<img src="img/produkt1.png" title="Názov produktu" class="product-thumbnail"> 
<img src="img/produkt2.png" title="Názov produktu" class="product-thumbnail"> 

5 изображений. Прямо сейчас я не получаю никаких предупреждений, но я знаю, что img изменил его размер (хром dev tools> показать размеры). Есть ли способ сделать это? (jquery включен, поэтому не должно быть проблем с селекторами)

Answer 1

Нет никакого действительно простого способа сделать это. jQuery resize() event предназначен для захвата событий изменения размера окна, а не для прослушивания отдельных элементов.

При том, что в-виду, и ради простого объяснения, позвольте мне предложить это:

1) В окне нагрузки, возьмите размеры изображения и вставить их в data- атрибут:

$(window).load(function() { 
    $('img.product-thumbnail').each(function(){ 
    var $this = $(this), 
     // get the image dimensions 
     thisWidth = $this.width(), 
     thisHeight = $this.height(); 

     // push them into an attribute 
     $(this).attr('data-width', thisWidth); 
     $(this).attr('data-height', thisHeight); 
    }); 
}); 

2) Свяжите событие в окно изменения размера и проверьте:

$(window).resize(function(){ 
    // loop over each, checking dimensions 
    $('img.product-thumbnail').each(function(){ 
     var $this = $(this), 
      // get the image dimensions 
      thisWidth = $this.width(), 
      thisHeight = $this.height(); 

     //check that there are data-attribtues before going further 
     if($this.attr('data-height').length){ 
      if(thisWidth !== $this.attr('data-width')){ 
       //width has changed 
      } 
      if(thisHeight !== $this.attr('data-height')){ 
       //height has changed 
      } 
     } 
    } 
}); 

Это очень быстро, непроверенных и unoptimised код, но теория позади него так и поможет вам дать хорошую отправную точку для определения того, изменился ли размер изображения.