Question

我试图用JQuery在我的一个Django应用程序页面上获取图像的宽度和高度。我使用JQuery .each方法遍历页面上的所有图像，并将该图像的宽度和高度注销到控制台。我知道.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

将$（document）.ready更改为$（window）.on（＆＃39; load＆＃39;，function（）{/ * ... * /}};

使用ready时，在加载和处理整个DOM时会触发该函数。如果加载了网站上的内容，则使用load会触发一个函数。

使用JQuery获取图像的宽度和高度不起作用

1 个答案: