如何在圖像上覆蓋繁忙的圖標？

Question

我一直在研究SO和Google，試圖找到一種簡單的方法來在現有圖像上覆蓋繁忙的圖標。 在對圖像應用濾鏡和效果時，我想通過在當前圖像上方顯示一個繁忙的圖標來讓用戶知道它正在被處理。

我是否需要創建某種疊加層圖像，以使其在流程開始時顯示並在使用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以及刪除帶有w / removeChild的東西，但這是我要在的地方d開始。