Solving Multiple Onload Issues with JavaScript

  • Context: Java 
  • Thread starter Thread starter Mattara
  • Start date Start date
  • Tags Tags
    Multiple
Click For Summary
SUMMARY

This discussion focuses on resolving multiple "onload" issues in JavaScript by executing functions sequentially with delays. Users propose using the setTimeout function to introduce delays between function calls, ensuring that each function executes only after the previous one has completed. A sample implementation is provided, demonstrating how to define functions in the <head> section and call them in sequence during the window.onload event. The final solution consolidates all function calls into a single onload handler to manage execution order effectively.

PREREQUISITES
  • JavaScript fundamentals, including functions and event handling
  • Understanding of the window.onload event
  • Familiarity with the setTimeout function for delays
  • Basic HTML structure, including <head> and <body> tags
NEXT STEPS
  • Implement JavaScript function chaining using setTimeout for sequential execution
  • Explore the Promise object for managing asynchronous function calls
  • Learn about the DOMContentLoaded event as an alternative to window.onload
  • Test JavaScript performance across different browsers and devices
USEFUL FOR

Web developers, JavaScript programmers, and anyone looking to optimize page load performance through effective function management.

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

Java How can I read a local file into an array in JavaScript?
  • · Replies 6 ·
Replies
6
Views
4K
Java How to communicate between javascript and php?
  • · Replies 21 ·
Replies
21
Views
6K
Java Problem with code, possibly multiple extensions of JFrame
  • · Replies 5 ·
Replies
5
Views
2K
Java Searching & Displaying Items in Android App Using Java & SQL
  • · Replies 5 ·
Replies
5
Views
3K
Java Javascript multiplication tables
  • · Replies 9 ·
Replies
9
Views
4K
Java Javascript Inheritance questions
  • · Replies 9 ·
Replies
9
Views
2K
Java JavaScript: Can't figure out what's going wrong in my use of this API
  • · Replies 2 ·
Replies
2
Views
6K
Java How do you handle multiple statements in Java's for loop?
  • · Replies 2 ·
Replies
2
Views
2K
Do you want to build a website?
  • · Replies 15 ·
Replies
15
Views
3K
Java Javascript/JQuery Nav Button Highlighting
  • · Replies 2 ·
Replies
2
Views
3K