Question

我一直在寻找SO和谷歌试图找到一种简单的方法来覆盖现有图像上的繁忙图标。在对图像应用滤镜和效果时，我想通过在当前图像的顶部显示忙碌图标让用户知道它正在被处理。

我是否需要创建某种叠加图像，我在流程开始时显示并在使用jquery完成后隐藏？

只是寻找可能已经完成此操作的人的一些想法。

Answer 1

通常，您绝对将图像放在内容上，在这种情况下是您的图像。您应该使用这样的包装元素来使定位起作用：

<div class="hasLoader">
    <img src="...your image..." />
    <img class="loading" src="...your LOADING image..." /> 
</div>

CSS：

.hasLoader {
    position:relative;
}

.loading {
    position:absolute;
    top:0;
    left:0;
}

如果你需要一个好的加载图像，AjaxLoad有一个很好的生成器。

Answer 2

看看这个：http://jsfiddle.net/dystroy/M3AnJ/

2秒钟后出现一个覆盖图，完全覆盖图像，旋转器位于中心。

我是这样做的：

javascript：

setTimeout(function(){
var o = $('<div id=overlay></div>');
o.prependTo('body');
var img = $('#test');
var pos = img.offset();
o.css({left:pos.left, top:pos.top, width:img.width(), height:img.height()});
}, 2000);

CSS：

#overlay {
    position: fixed;
    background-color:rgba(100,100,100,0.5);
    background-image: url("http://dystroy.org/loading.gif");
    background-position:center;
    background-repeat:no-repeat;
};

Answer 3

正如@Diodeus所说，理想情况下你会在图像周围有一个包装器，所以定位加载图像的问题相对于图像是微不足道的。

如果一个包装器不是一个选项（即你正在使用现有的，不可更改的标记，或者包装器会破坏你的CSS集体，那么它不是世界末日。你只需要将图标放在图像，利用jQuery使得元素相对于身体的坐标变得容易，而不仅仅是它的相对父/祖先。

HTML （将其直接放在正文中，而不是嵌套）

<img src='loading.png' id='loading' />

<强> CSS

#loading { position: absolute; display: none; /* other styles, BG img etc */ }

JavaScript （el是相关的页面元素）

var loading_img = $('#loading');
function func_called_when_stuff_happening(el) {
    var el_coords = $(el).offset();
    loading_img.show().css({
        left: el_coords.left + (($(el).width() / 2) - (loading_img.width() / 2)),
        top: el_coords.top + (($(el).height() / 2) - (loading_img.height() / 2)),
    });
}

这会将图标放在元素的中间。

Answer 4

我会创建一个透明的GIF，并将其绝对定位在目标图像上，带有JavaScript：

var targetImage = document.getElementById("targImgID");
var ovrlay = document.createElement("IMG");
ovrlay.src = "\my\image\url\overlay.gif";
ovrlay.style.position = "absolute";
ovrlay.style.left = targetImage.offsetLeft + "px";
ovrlay.style.top = targetImage.offsetTop + "px";
document.body.appendChild(ovrlay);

这是未经调试的原型代码，并省略了一些内容，例如获取目标图像的绝对位置，居中和设置覆盖的z-index，以及删除具有removeChild的东西，但它是我从哪里开始。

如何在图像上叠加忙碌图标？

4 个答案: