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.