my web page has lots of javascripts in it. It takes longer time to execute when page loads . I want to display a image till the time javascript execution ends.
basically , the image has a text , “Please wait ,javascript execution in progress…”.
How to do it ?
I won’t mind if there is a Jquery solution also.
You can now download it from the following location:
http://www.itplate.com/components/jMessage-Original.zip
@Mod , could you please approve the attachment .
it says attachment pending approval .
i can’t download the attachment.
Sample project (jQuery) is attached. It is fully working example but not a finished product.
This is something that i am building for my own “specific” needs. You’ll need to modify it a bit per your needs. Unzip and execute default.htm. It has every thing that you’ll need to set it up or change per your needs.
If you modify/update, please post back so that some one else may benefit from it also.
Enjoy!
How do we implement this ?
Is there any library/package available in the net ? I don’t mind whether its a image loading or a simple CSS layer . All I want to display a message that some…" javascript task is going on …please wait"
I call a function at the time of page loading .
page load onload=“somefunction()”
somefunction() is taking longer time to execute so I want to display a message to the user to wait. It could be CSS layer or It could be Image …I don’t bother much really.
IS there any package / library available which could help in this regard ?
Can I do it using JQuery ?
Clear image as in a transparent gif yes.
Have a look at the site in my sig. I have a timer, it’ll say “livescript reload is off” with a small image to the left. The small image is actually a long image of 10 states, but you can only see one of those states. I move the background image (the 10 states) left one unit (or image) at a time. I think Facebook does the same and Google’s clock works in the same way, the hands are 1 long image.
It’s a better way as you don’t need to preload the images, or do an image swap.
Does anybody have any alternative suggestion ?
Nothing understood. trying to understand in steps.
you want to use clear image ? did you mean transparent image ?
with a background of the message as an image that’s positioned out of view
very much confused here . This seems you are saying no clear image now…nothing understood here.
Will it be possible if you could show me a small snippet to illustrate this concept. I am not getting you.
You could use an animated image similar to how facebook does it as well. Their image makes it obvious the page is loading 
facebook…Yes. I have a face book account . Which page you are talking about ? Login page ? I’ll do a check and find the experience browsing it.
I think a clear image, with a background of the message as an image that’s positioned out of view but brought in to view with javascript might be a nice way to go with this. You could use an animated image similar to how facebook does it as well. Their image makes it obvious the page is loading
or you can do some thing simple, put a div tag on the page with a message and the animated image. Once you are done loading your stuff, just hide it using jquery or simple javascript.
jQuery:
$("#divID").hide();
jScript:
document.getElementById('divID').style.display = "none";
function somefunction() {
jMessage('loading page...', '', true, false);
//my lengthy code here
// HOW DO I STOP THE LOADING message now ?
[B][COLOR=red]jMessageHide();
[/COLOR][/B]}
jMessage(‘loading page…’, ‘’, true, false);
The first boolean is to show the processing - animated image when true.
The second boolean is to make the message sticky when true. User will need to click X to close the message.
default.htm has all the examples.
Please open jquery.alerts.messages.js and scroll towards the bottom to look at the global functions that you can utilize, here is the list:
//short cut
jMessage = function(message, showNearThisObject, blnProcessImage, blnSticky, callback) {
$.messages.message(message, showNearThisObject, blnProcessImage, blnSticky, callback);
}
jMessageOK = function(message, showNearThisObject, blnProcessImage, blnSticky, callback) {
$.messages.messageOK(message, showNearThisObject, blnProcessImage, blnSticky, callback);
}
jMessageError = function(message, showNearThisObject, blnProcessImage, blnSticky, callback) {
$.messages.messageError(message, showNearThisObject, blnProcessImage, blnSticky, callback);
}
jMessageHide = function() {
$.messages.messageHide();
}
jMessageHideInterval = function(interval){
setTimeout('$.messages.messageHide()', interval);
}
Again, this is some thing that i am developing for my own specific needs. I am already working on the changes as i get time. For your needs, either you can use this as is or build upon it.
Could you please explain the meaning of these RED parameters you used
//onload
jMessage('loading page...', '', [COLOR="Red"][B]true, false[/B][/COLOR]);
jMessageHideInterval(5000);
I don’t want to put Interval = 5000 , because I don’t know how much time my javascript will take to finish.
In my page load I call a function. onload=“somefunction()”
function somefunction() {
// This takes long time to execute
}
Now, If I use your code here this way …
function somefunction() {
jMessage(‘loading page…’, ‘’, true, false);
//my lengthy code here
// HOW DO I STOP THE LOADING message now ?
}
If I use your code as in the above . how do I stop the loading when the javascript task is completed. I can not put Interval = 5000 to stop as I don’t know how much the task will consume.