Question

我正在使用引导标签，我在其中一个标签中有图像。我需要得到他们的宽度，但问题是他们被设置为display:none，直到我点击该标签，所以jquery width()总是返回0.我已经尝试将它放入window.load并且也是#tabid.load，但它们都不起作用。那么有没有办法在隐藏的jquery选项卡中获取图像的宽度？我只需要在显示选项卡时需要它们的宽度，所以我认为应该有一些事件监听器在选定的选项卡完全加载时触发，但我还没有找到它。还按照bootstrap中的描述尝试on('shown',function())，但它也不起作用。

编辑：这是代码：

<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()));

使用此事件甚至在页面加载之前触发imediatly并显示null。还尝试将id =“test”放入href而不是实际，但它也不起作用。无论如何，bootstrap文档说它应该打开而不是div

Answer 1

问题是on.('show'图片已加载但尚未呈现，因此$.width和$.height不提供尺寸信息。

但您可以在width之后直接阅读height DOM元素的img和$(window).load属性。

请参阅example

如果您需要渲染图像，然后才希望采用渲染尺寸，则应使用on('shown'...。仅在显示选项卡（包含图像）后触发。

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

显示从无变为阻塞时的事件监听器

1 个答案: