Question

我试图在显示div后获取图像的尺寸。

我得到了什么：

JQUERY ：

$("body").on("click", ".more-info", function(e) {
    e.preventDefault();
    $(".component-alt-main").show(0, function() {
        $(this).find(".component-img").each(function() {
            $(this).find("img").on("load", function() {
                console.log("A")
            });
        });
    });
});

HTML ：

<div class="component-alt-main"> <!-- This has display none -->
    <div class="container">
        <div class="components">
            <h3>Versiones alternativas</h3>
            <div class="component-container">
                <div class="component">
                    <div class="component-img">
                        <img src="modulos/topbar/topbar-01b_ios@2x.png">
                    </div>
                    <p class="title">Topbar principal <b>simple</b></p>
                    <div class="component-text">
                        <p>
                            Puede darse el caso de que tengamos una sección dónde sólo aplique el título.
                        </p>
                    </div>
                </div>
                <div class="component">
                    <div class="component-img">
                        <img src="modulos/topbar/topbar-01c_ios@2x.png">
                    </div>
                    <p class="title">Topbar principal <b>simple</b></p>
                    <div class="component-text">
                        <p>
                            Variable de un botón pulsable en el lateral derecho. No puede haber más de uno.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我点击一个按钮（console.log()）后尝试获取.more-info，但它没有进入。我不知道是不是因为图像已经加载（即使.component-alt-main与display: none;一起）。但是如果我尝试在.show（）之前获取这些图像，那么它们的width显然是0。

上面的代码出了什么问题？

PS：

我问这个是因为稍后我必须使用AJAX来加载图片后重新调整大小。

PSS：*

.each()上的console.log工作正常。

Answer 1

参考：http://api.jquery.com/load-event/

与图像一起使用时加载事件的注意事项

开发人员尝试使用.load（）解决的常见问题   快捷方式是在图像（或集合）时执行函数   图像）已完全加载。有几个已知的警告   这应该注意。这些是：


它不能始终如一地工作，也不能可靠地跨浏览器

如果图像src设置为与src相同的src，它在WebKit中无法正确触发   之前

它没有正确地冒泡DOM树

可以停止触发已存在于浏览器缓存中的图像

因为您可以看到它不是在load标记上使用img的可靠方式。您可以尝试使用AJAX load方法加载图像，并在complete处理程序中使用。或者，阅读服务器端代码中的img维度，并将其作为数据属性传递到img标记。

Answer 2

同意@Vivek Athalye的回答。此方法还可以帮助您获取（样本）图像的宽度和高度属性。

<body>
<div class="component-alt-main"> <!-- This has display none -->
    <div class="container">
        <div class="components">
            <h3>Versiones alternativas</h3>
            <div class="component-container">
                <div class="component">
                    <div class="component-img">
                        <img src="https://www.w3schools.com/w3css/img_fjords.jpg">
                    </div>
                    <p class="title">Topbar principal <b>simple</b></p>
                    <div class="component-text">
                        <p>
                            Puede darse el caso de que tengamos una sección dónde sólo aplique el título.
                        </p>
                    </div>
					<input class="more-info" type="button" value="Get Dimensions"/>
                </div>
                <div class="component">
                    <div class="component-img">
                        <img src="http://www.bajiroo.com/wp-content/uploads/2015/10/most-disturbing-photoshopped-of-the-month-pics-images-photos-pictures-bajiroo-31.jpg">
                    </div>
                    <p class="title">Topbar principal <b>simple</b></p>
                    <div class="component-text">
                        <p>
                            Variable de un botón pulsable en el lateral derecho. No puede haber más de uno.
                        </p>
                    </div>
					<input class="more-info" type="button" value="Get Dimensions"/>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$("body").on("click", ".more-info", function(e) {
  e.preventDefault();
    $(".component-alt-main").show(0, function() {
        $(this).find(".component-img").each(function() {
            $(this).find("img").each(function () {
			
 
   console.log("width: " + this.clientWidth + " and Height: "+this.clientHeight);
   
});
        });
    });
});
</script>
</body>

jquery - .show（）之后的图像加载

2 个答案: