How do I overlay a busy icon on an image? - php

Question

I've been looking through SO and Google trying to find a simple way to overlay a busy icon on an existing image. While applying filters and effects to images I'd like to let the user know it's being processed by showing a busy icon on top of the current image.
Do I need to create some sort of overlay image that I show at the start of the process and hide after it's complete using jquery?
Just looking for some ideas from people that might have done this already.

Answer 1

As #Diodeus said, ideally you'd have a wrapper around the image so the issue of positioning the loading image is trivial relative to the image.
If a wrapper is not an option (i.e. you're working with existing, unchangeable mark-up, or wrappers would break your CSS en-masse, it's not the end of the world. You can just plonk the icon over the image, taking advantage of the fact that jQuery makes it easy to get an element's coordinates relative to the body, not only its relative parent/ancestor.
HTML (put this directly in the body, not nested)
<img src='loading.png' id='loading' />
CSS
#loading { position: absolute; display: none; /* other styles, BG img etc */ }
JavaScript (el is the page element concerned)
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)),
});
}
That will put the icon in the middle of the element.

Answer 2

Generally you absolutely-position an image over the content, in this case your image. You should use a wrapping element like this to get the positioning to work:
<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;
}
If you need a good loading image, AjaxLoad has a good generator.

Answer 3

Look at this : http://jsfiddle.net/dystroy/M3AnJ/
After 2 seconds an overlay appears, exactly covering the image, with a spinner at center.
Here's how I do it :
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 4

I would create a transparent GIF and absolutely position it over the target image 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);
This is prototype code that hasn't been debugged, and leaves out some stuff like getting the absolute position of the target image, centering and setting a z-index for the overlay, and removing the thing w/ removeChild, but it's where I'd start.