Solving Multiple Onload Issues with JavaScript

Mattara · Apr 4, 2006

I have a certain service on an ISP. I am having a few minor "hang" problems on page load.

Im assuming this is because both have "onload" calls, as do other modifications I'm using, and this "hang" is cause by the codes all loading at once?

I want to set the different mods to load in sequence instead by using a delay. E.G.

<BODY onLoad="javascript:alert('First Action');alert('Second Action');">

but I am not sure how to go about it. If I listed the "onload" function of each modification I use, could somebody who knows what they are doing work out a code like above to specification for me and tell me where to put it?
(i presume css inline/ head tags equivalent?)

I.E

1 load "item one"
2 load "item two"
3 load "some other thing"

maybe something like this in an external js (but put where?)

CODEfunction start() {
function1();
function2();
function3();
}
window.onload = start;

Brainpower appreciated,

chroot · Apr 4, 2006

Couldn't you just define a JavaScript function inside a script tag in the header, then call that function from your onLoad event?

- Warren

-Job- · Apr 5, 2006

I'm confused as to what you want to do. The idea that i have is that all you want to do is load a number functions in sequence, but what is the difficulty in this? The code you posted, with the function start(), would accomplish this. Just copy the code from each of your onloads and place them inside functions defined in the html head, then call that function onload, like:

Code:

<html>
<head>
<script language="javascript">
function func1(){
	//the code for your first onload here
	alert("func1");
}
function func2(){
	//the code for your second onload here
	alert("func2");
}
function func3(){
	//the code for your third onload here
	alert("func3");
}
function start(){
	func1();
	func2();
	func3();
}
</script>
</head>
<body onload="start()">
</body>
</html>

But this is pretty much the same as you posted, so i can't see what is exactly challenging you at this point. Do you want a timer delay between the function calls? Do you want to avoid placing the onloads inside functions?

Mattara · Apr 5, 2006

-Job- said:

Do you want a timer delay between the function calls?

Mattara said:

I want to set the different mods to load in sequence instead by using a delay.

That is what I have in mind, but I'm not sure on how to accomplish it..

-Job- · Apr 5, 2006

Then use setTimeout to implement a delay between function calls. Nothing very complex, like:

Code:

<html>
<head>
<script language="javascript">
function func1(){
	alert("func1");
}
function func2(){
	alert("func2");
}
function func3(){
	alert("func3");
}
var counter = 1;
function delayedCall(){
	this["func"+counter++]();
	if(counter<4){
		setTimeout("delayedCall()", 1000);
	}
}
window.onload = delayedCall;
</script>
</head>
<body>
</body>
</html>

myfcr · Jan 1, 2009

Just use toload_a('Script name'); to add functions in toload_e(). toload_e() will start on the page load.

Code:

<html>
<head>
<script language="javascript">
function duytr(){
	alert("func1");
}
function treda(){
	alert("func2");
}
function fregt(){
	alert("func3");
}


toloadfunc=new Array();
function toload_a(funcname){
	toloadfunc[toloadfunc.length]=funcname;
}
toload_a('duytr');
toload_a('treda');
toload_a('fregt');

function toload_e(){
	if(toloadfunc){
		for(var index = 0; index < toloadfunc.length; index++)
		{
		this[toloadfunc[index]]();
		}
	}
}
window.onload = toload_e;
</script>
</head>
<body>
</body>
</html>

harborsparrow · Jan 6, 2009

myfcr has it right (above). Each browser tends to load Javascript files and subroutines that are declared in the page header in a different (unpredictable) order, so you need to consolidate calls to each individual subroutine in one 'onload' subroutine, cause a delay at the top of the 'onload' subroutinet in order to let all the rest of them get loaded into memory, and then let the individual subroutines get called in the order you want.

You'll need to test it in several different browsers and on slower machines to make sure it works in all cases.

Solving Multiple Onload Issues with JavaScript

FAQ: Solving Multiple Onload Issues with JavaScript

What is JavaScript and why is it important for solving multiple onload issues?

What are onload issues and how can JavaScript help with them?

What is the role of the onload event in JavaScript?

What are some common techniques for solving multiple onload issues with JavaScript?

Are there any potential drawbacks or limitations to using JavaScript for solving multiple onload issues?

Similar threads

Hot Threads

Recent Insights