jquery - 如何在没有父div包裹img的情况下相对于img定位div

Question

我目前正在编写一个小 jqueryplugin，用于预加载图像，每个图像都有一个状态栏。

状态栏应在每个图像上方水平和垂直居中。

因为它应该是一个插件，所以我不希望用户需要用相对定位的 div 包装每个图像，以便相对于 img 定位另一个 div。使用 cms，用户甚至可能无法更改图像的输出方式。

所以我不想要的是这样的:

<div style="position: relative">
  <img src="" />
  <div style="position: absolute, ...">100% loaded</div>
</div>

我想要的是:

  <img src="" />
  <div style="position: absolute, ...">100% loaded</div>

我尝试使用 jQuery 在图像后面放置一个 div，将其设置为相对位置，并将一个 div 放置在绝对位置的 div 内部。这可能适用于某些情况，但这取决于 img 的 css...它是否 float 等等。

有 CSS 或 jQuery 大师给我一些建议吗？ :-)

干杯

Answer 1

这将包装 img 并在加载图像时删除包装器。

$('img').each(function () {

  var $img = $(this),
      $percentLoaded = $('<span class="percent-loaded">');

  $img.wrap('<span class="preloader">');

  $img.parent().append($percentLoaded);

  $img.on('load', function () {
    $percentLoaded.fadeOut(5000);
    $img.unwrap();
  });

});

然后 CSS 看起来像这样:

.preloader {
  position: relative;
  display: inline-block;
}

.preloader .percent-loaded {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(255, 0, 0, 0.5)
}

这是一个演示:http://jsbin.com/jesuneqo/1/edit