jquery - 显示从无更改为阻止时的事件监听器

Question

我正在使用 Bootstrap 选项卡，并且其中一个选项卡中有图像。我需要获取它们的宽度，但问题是它们被设置为 display:none 直到我单击该选项卡，因此 jquery width() 始终返回 0。我有尝试将其放入 window.load 和 #tabid.load 但它们都不起作用。那么有没有办法获取隐藏 jquery 选项卡中图像的宽度？仅当显示选项卡时我才需要它们的宽度，因此我认为应该有一些事件监听器在所选选项卡完全加载时触发，但我还没有找到它。还尝试了 on('shown',function()) 如 bootstrap 中所述，但它也不起作用。

编辑:这里是代码:

<ul class="nav nav-tabs" id="myTab">
     <li class="active"><a href="#popis" data-toggle="tab">Popis</a></li>
     <li><a href="#recenzie" data-toggle="tab">Recenzie</a></li>
     <li><a href="#galeria" data-toggle="tab">Galéria</a></li>
     <li><a href="#ostatne-produkty" data-toggle="tab" id="#test">Súvisiace produkty</a></li>
</ul>

JavaScript:

$('#test').on('shown',alert($('img.product-thumbnail').width()));

这个事件甚至在页面加载之前就立即触发，并且显示为空。还尝试将 id="test"不放入 href 而是放入实际中，但它也不起作用。不管怎样， Bootstrap 文档说它应该在 div 中而不是在 div 中

Answer 1

问题在于 on.('show' 图像已加载但尚未渲染，因此 $.width 和 $.height 不提供尺寸信息。

但是你可以在$(window).load<之后直接读取img DOM元素的width和height属性.

请参阅example

如果您需要渲染图像，然后才希望获取其渲染尺寸，那么您应该使用 on('shown'...。仅在显示选项卡(包含图像)后触发。

我已经尝试过it out and它按预期工作了