JQuery로 이미지의 너비와 높이를 얻지 못했습니다.

Question

JQuery를 사용하여 장고 응용 프로그램 페이지 중 하나에서 이미지의 너비와 높이를 가져 오려고합니다. 나는 JQuery.each 메서드를 사용하여 페이지의 모든 이미지를 반복하고 콘솔에 해당 이미지의 너비와 높이를 로그 아웃합니다. 각 이미지가 alt 속성을 로깅하기 때문에 각 메소드가 작동하고 있음을 알 수 있습니다. 그러나 width() 및 height() 메서드를 사용하면 콘솔에 0과 0으로 표시됩니다. 내가 여기서 잘못하고 있는게 있니? css로 이미지의 높이와 너비를 설정 한 경우에만 작동합니까? .ready $ (창) CSTE 연구진 ('로드', 기능() {/ *에

템플릿

{% load inplace_edit %} 

<section id="{{ section.label|slugify }}" class="sponsor"> 

    <div class="container"> 
     <div class="row"> 
      <div class="sponsor-wrapper col-xs-12"> 
       {% for level in sponsor_levels %} 
        <div class="row row-centered"> 
         <div class="ccr-sponsor"> 
          <h3 class="sponsor-title">{% inplace_edit 'level.label' %}</h3> 
         </div> 
        </div> 

        <div class="row row-centered"> 

         {% if forloop.counter0 == 0 %} 
          {% for sponsor in level.get_sponsors %} 
           <div class="col-sm-4 col-centered"> 
            <a href="{{ sponsor.link }}" target="_blank" 
             class="{% if sponsor.side %}wide{% else %}tall{% endif %}"> 

             <img src="{{ sponsor.image.url }}" alt="{{ sponsor.name }}"> 
            </a> 
           </div> 
          {% endfor %} 
         {% elif forloop.counter0 == 1 %} 
          {% for sponsor in level.get_sponsors %} 
           <div class="col-sm-3 col-centered"> 
            <a href="{{ sponsor.link }}" target="_blank" 
             class="{% if sponsor.side %}wide{% else %}tall{% endif %}"> 

             <img src="{{ sponsor.image.url }}" alt="{{ sponsor.name }}"> 
            </a> 
           </div> 
          {% endfor %} 
         {% else %} 
          {% for sponsor in level.get_sponsors %} 
           <div class="silver-item col-centered"> 
            <a href="{{ sponsor.link }}" target="_blank" 
             class="{% if sponsor.side %}wide{% else %}tall{% endif %}"> 

             <img src="{{ sponsor.image.url }}" alt="{{ sponsor.name }}"> 
            </a> 
           </div> 
          {% endfor %} 
         {% endif %} 

        </div> 
       {% endfor %} 
      </div> 
     </div> 
    </div> 

</section> 

    <script> 
{# $(document).ready(function() {#} 
{#  $('img').each(function() {#} 
{#   console.log($(this).attr('alt'));#} 
{#   console.log($(this).width());#} 
{#   console.log($(this).height());#} 
{#  })#} 
{# });#} 
    $(document).on('load', function() { 
     $('img').each(function() { 
      console.log($(this).attr('alt')); 
      console.log($(this).width()); 
      console.log($(this).height()); 
     }) 
    }); 
</script> 

콘솔

Answer 1

변경 $ (문서) ... * /});

준비를 사용하면 전체 DOM을로드하고 처리 할 때 함수가 트리거됩니다. 로드를 사용하면 웹 사이트의 컨텐츠가로드 될 때 함수가 트리거됩니다.