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 ...它是否浮动等等。

是否有任何CSS或jQuery-Guru为我提供了一些建议？： - ）

干杯

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

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

1 个答案: