0

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

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

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

4

4 回答 4

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

于 2012-07-12T16:51:11.030 回答
1

看看这个：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;
};​
于 2012-07-12T16:55:31.113 回答
1

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

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

于 2012-07-12T16:58:07.247 回答
0

我会创建一个透明的 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 删除东西，但这是我的地方d 开始。

于 2012-07-12T16:57:29.003 回答