Animated Image - Dev Shed

Dev Shed Forums Sponsor:

October 25th, 2012, 11:39 AM

otnj2ee

Contributing User

Join Date: Nov 2005

Posts: 46

Time spent in forums: 10 h 41 m 8 sec
Reputation Power: 8

Animated Image

When the user does the search and waits for the result, an animated image such as an hourglass will appear on the middle of the screen so that the user will know the process is still going on.

I went to this site:http://loadinggif.com/ and downloaded #3, and saved it to my server's WebContent/images directory. I gave it a name: dial.gif.

Next I tried to used it in a popup <div> (z-index based).

The original codes:

var processing = '<div class="process"><br>'
content += '<embed src="/flash/loading.swf" quality="autolow" '

if(modal.browserWindow.os != 'mac') {
content += ' wmode="transparent"';
} else {
content += ' wmode="window"';
}

content += ' pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="60" height="60"></embed>' + '</div>';

Now, I tried to use the download image, dial.gif to replace the swf file, something like:

content += '<div ><img src="/imgs/dial.gif" /></div';

How can I do it?

Last edited by otnj2ee : October 25th, 2012 at 11:52 AM.

October 25th, 2012, 03:07 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 605

Time spent in forums: 1 Week 1 Day 16 h 17 m 48 sec
Reputation Power: 69

You could do something like this:

Code:

<script>

function hideLoadIcon(getID)
{
document.getElementById(getID).style.display="none";
}

function readyLoad()
{
var processing = document.createElement("div");
var loadingIMG = document.createElement("img");
processing.setAttribute("id","processor");
processing.setAttribute("class","process");
loadingIMG.setAttribute("src","/imgs/dial.gif");
document.getElementsByTagName("body")[0].appendChild(processing);
document.getElementById("processor").appendChild(loadingIMG);
}

document.onreadystatechange = function() {
if (document.readyState=="interactive") {
 new readyLoad();
}
}

window.onload = function() {
 new hideLoadIcon('processor');
}

</script>

Viewing: Dev Shed Forums > Web Design > JavaScript Development > Animated Image

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump