我一直在浏览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删除内容,但这是我的起点。