javascript - img 上的 width="" 和 "height"" 弄乱了他们的能见度

Question

为什么我需要指定此页面上图像的宽度=“”和高度=“”才能正确显示？此列表中未指定其暗淡的图像不可见。我可以让它不需要指定吗？

谢谢！

http://www.rollinleonard.com/elements/index-new.php

http://jsfiddle.net/ZTDjf/ - 删除此图像中突出显示的位：http: //i.imgur.com/SquKx.png - 看看结果如何隐藏该图像？这是为什么？

Answer 1

我认为 jquery.hover_caption.js 依赖于您为图像指定的宽度和高度。

它将采用宽度和高度值并应用于插件动态创建的父 DIV。

如果您不指定图像的宽度和高度，插件将不知道它应该放置到父 div 的高度/宽度。所以父div会有<div style="width: 0px; height: 0px;">

这就是图像不显示的原因。

请参阅下面的 html 标记：

<div style="width: 0px; height: 0px;"><h3 class="hover_caption_caption" style="padding: 0px; color: white; width: 0px; font-size: 18px; position: absolute; margin: 0px; display: none;">SPR scene 7.1 2011</h3><img title="SPR scene 7.1 2011" src="zzzthumbs/spr-scene7.1.jpg" style="z-index: -1; position: relative; font-weight: bold;"></div>

Answer 2

我认为您所要做的就是在“加载”处理程序中运行插件而不是“准备好”。

<script>
  $(window).load(function() {
    $('img').hover_caption();
  });
</script>

当你在“准备好”运行它时，图像还没有加载，所以插件不会知道它们有多大。