부트 스트랩 이미지의 크기가 조정되었는지 확인하는 방법

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가 크기를 변경했다는 것을 알고 있습니다 (chrome dev 도구> show dimensions). 이것을 충실히 수행 할 방법이 있습니까? (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 코드이지만 뒤에 이론이 s입니다 olid를 사용하면 이미지의 크기가 변경되었는지 여부를 감지 할 수있는 좋은 출발점이됩니다.