JQueryで画像の幅と高さを取得できない

Question

JQueryを使用している私のDjangoアプリケーションページの1つで画像の幅と高さを取得しようとしています。私はJQuery.eachメソッドを使ってページ上のすべてのイメージをループし、そのイメージの幅と高さをコンソールにログアウトします。私はそれぞれのメソッドが動作していることを知っています。なぜなら、画像alt属性も表示されているからです。しかし、width（）メソッドとheight（）メソッドを使用すると、コンソールには0と0が表示されます。私がここで間違っていることはありますか？これはCSSで画像の高さと幅を設定した場合にのみ機能しますか？

テンプレート

{% 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

変更$（文書）$（ウィンドウ）に.ready .on（ 'ロード'、機能（）{/ * ... * /}）;

レディを使用すると、DOM全体が読み込まれて処理されるときに関数がトリガされます。 Webサイトのコンテンツがロードされている場合、loadを使用すると関数がトリガーされます。