/    Sign up×
Community /Pin to ProfileBookmark

Simple js loading icon

Hi all, my first post in this lovely forum

I’ve been trying (in vain) to get this little script working properly but unfortunatly dont have the know how to finish it up.

Basically I have a site that loads content into divs dynamically, which on occasion takes a little time to load, instead of letting the user guess the sites still working I decided to put the following into my main page. Basically whenever a link is clicked a hidden div is shown (with the animated loading icon) this bit works fine but cant seem to get it to disappear again once the page is done loading. I’ve tried to put a setTimeout on the code but am not sure where or how to implement it.

Sorry for the long post, and thanks for taking your time to have a read. If anyone can help me solve this problem I’d be eternally grateful.

Ideally the image should dissappear after 2000 (2 seconds) using the setTimeout function.

Code:

[CODE]
<head>
<script language=”JavaScript”>
<!–
function showProgress() {
document.getElementById(“progress”).style.visibility = ‘visible’;
}
setTimeout(showProgress(), 3000);
//–>
</script>
</head>

<body>
<script>
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById(“loading”).style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility=”hidden”;}
else if (ns6||ie4) ld.display=”none”;
}
</script>
<a href=”A-LINK” onclick=”javascript:showProgress();”>Item</a>
<span id=”progress” style=”visibility:hidden;”>
<img src=”system/css/images/loading.gif” border=”0″/>
</span>
</body>
[/CODE]

Thanks

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@gil_davisMay 13.2008 — Did you look at the status bar to see if you have any javascript errors?

I suspect you are missing several curly braces in your "if" statement.
×

Success!

Help @Jam87 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.30,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...