Onload Event
When a developer launches a specific function once the page is fully loaded, the Javascript Onload event is used.
Another common application of JavaScript onload is to use it to verify visitors’ web browsers and alter how websites are loaded. You can also use it to see what cookies a website employs.
Most of the popular browsers support the window.onload feature. It starts the moment the resource is loaded.
Features of Onload Event
The main features of Onload events are as follows:
- When an object is loaded, the JavaScript onload event occurs.
- The onload attribute is most commonly used in the <body> element to run a script once a page has fully loaded (including the script files, images, CSS files, etc.).
- The onload event should check the visitor's browser type and version and then load a specific web page version based on that information.
- The onload event can handle the cookies of the Websites.
Example of Onload Event
Here is an example of the Onload event. We are using onload on an <img> element.
Code
<!DOCTYPE html>
<html>
<body>
<img src="https://www.pngkit.com/png/full/307-3074231_coding-ninjas-coding-ninjas-logo.png" onload="loadImage()" width="300" height="200">
<script>
function loadImage() {
alert("Image is loaded");
}
</script>
</body>
</html>
You can also try this code with Online Javascript Compiler
Output
You can practice by yourself with the help of Online Javascript Compiler for better understanding.
Onerror Event
The onerror event handler was JavaScript's initial functionality for managing errors. The error event is triggered on the window object whenever a page exception occurs.
It would be best to construct a function to handle errors before using the onerror event. The onerror event handler is then used to call the method. The msg (error message), URL (the URL of the page that generated the issue), and line(the line where the error occurred) parameters are passed to the event handler.
Syntax
onerror=handleErr
function handleErr(msg,url,l)
{
//Handles the error and
return true or false
}
You can also try this code with Online Javascript Compiler
The value given by onerror controls whether the browser displays a standard error message. The browser displays the normal error message in the JavaScript console if we return false. The browser does not display the typical error message if we return true.
Example
The onerror event is utilised to catch the error in the following example:
Code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
onerror=handleErr;
var txt="";
function handleErr(msg,url,l)
{
txt="There is an error on this page.\n\n";
txt+="Error: " + msg + "\n";
txt+="URL: " + url + "\n";
txt+="Line: " + l + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
return true;
}
function message()
{
addalert("Welcome Ninja!");
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>
You can also try this code with Online Javascript Compiler
Output
Must Read Fibonacci Series in JavaScript
FAQs
Explain the differences between Java and JavaScript.
Java is an all-in-one programming environment. On the other hand, JavaScript is a coded programme that may be embedded in HTML pages. These two languages are not interdependent and were created with distinct goals. JavaScript is a client-side scripting language, whereas Java is an object-oriented programming (OOPS) or structured programming language like C++.
Which is faster, JavaScript or an ASP script?
It is quicker to use JavaScript. Because JavaScript is a client-side language, it doesn't require the webserver's help to run. In contrast, ASP is a server-side language, and it is always slower than JavaScript.
In JavaScript, how do timers perform?
Timers are used to execute a piece of code at a predetermined period or interval. This is accomplished using the functions setTimeout, setInterval, and clearInterval.
Does JavaScript provide automated type conversion?
JavaScript supports automatic type conversion. It is the most frequent type of conversion method used by JavaScript programmers.
In JavaScript, what are the several sorts of pop-up boxes?
The three pop-up boxes in Javascript are Confirm, Alert, and Prompt.
Conclusion
In this article, we have extensively discussed resource loading in javascript. We discussed the functionalities of Onload and Onerror events in Javascript. We also discussed the features of events and their respective examples.
We hope that this blog has helped you enhance your knowledge regarding resource loading in Javascript. You can learn more about Javascript by visiting this. You can also create apps using Javascript.
Do upvote our blog to help other ninjas grow.
Check out this problem - Smallest Distinct Window .
Head over to our practice platform Coding Ninjas Studio to practice top problems, attempt mock tests, read interview experiences, and much more!!
We wish you Good Luck! Keep coding and keep reading Ninja!!
85+ registered 