Java Solving Multiple Onload Issues with JavaScript

  • Thread starter Thread starter Mattara
  • Start date Start date
  • Tags Tags
    Multiple
AI Thread Summary
The discussion centers around resolving "hang" issues during page load caused by multiple "onload" calls in a web application. The user seeks to load various modifications sequentially with delays to improve performance. Several participants suggest using JavaScript functions defined in the header to manage the loading sequence. A common approach involves creating a main function that calls individual functions with a delay using `setTimeout`. This method allows for better control over the execution order of scripts, ensuring that they load without conflict. Additionally, it is emphasized that testing across different browsers and slower machines is crucial to ensure consistent behavior. The conversation highlights the importance of consolidating JavaScript calls to avoid unpredictable loading sequences.
Mattara
Messages
347
Reaction score
1
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,
 
Technology news on Phys.org
Couldn't you just define a JavaScript function inside a script tag in the header, then call that function from your onLoad event?

- Warren
 
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?
 
-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..
 
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>
 
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>
 
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.
 

Similar threads

Replies
21
Views
6K
Replies
9
Views
4K
Replies
9
Views
2K
Replies
15
Views
2K
Replies
2
Views
3K
Back
Top