如何在图像上叠加忙图标

How do I overlay a busy icon on an image?

本文关键字：叠加 图标 图像      更新时间：2023-09-26

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

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

只是从那些可能已经做过这件事的人那里寻找一些想法。

正如@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)),
    });
}

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

通常，您绝对会将图像放置在内容之上，在本例中是您的图像。您应该使用这样的包装元素来实现定位：

<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有一个很好的生成器。

看看这个：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;
};​

我会创建一个透明的GIF，并将其绝对定位在目标图像上w/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索引，以及使用removeChild删除内容，但这是我的起点。

相关文章：