Home >Web Front-end >Front-end Q&A >What is the difference between onload and load in JavaScript?
What is the difference between onload and load in JavaScript?
- 青灯夜游Original
- 2020-12-14 10:06:243874browse
Difference: load only indicates the event method, but is not executed; onload indicates that it will be executed after loading everything on the page. Only one onload function is allowed to appear on the page because it only has one programmable function. onload may be executed before some elements are loaded, and load will be executed after all elements are loaded.
Related recommendations: "jQuery Video Tutorial"
When writing interactions, whether the loading function should be onload or load Woolen cloth?
Take the opportunity to organize it so you don’t forget it! !
window.onload(function) in js is equivalent to $(window).onload(function) in jquery
1: window.load only indicates the event method, but it is not executed. For example, hover and click represent events, and hover and onclick must be used before they will be executed.
There is usually a Loading effect when the page is loaded and rendered, and you can use it at this time:
JS:
$(window).load(function(){
$(".loadingicon").addClass("loader-chanage");
$(".loadingicon").fadeOut(300,function(){
$(".loadingicon").remove();
$(".maker").show().animate({"right":"0"},500);
});
})
$(window).load(function) The images and other resources in the page will not be executed until they are loaded;
2: window.onload means that the loading is complete Everything on the page is executed only after everything is executed. Only one onload function is allowed to appear on the page, because it only has one programmable function:
JS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo float</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){ alert("这是1");};
window.onload = function(){ alert("这是2");};
</script>
</body>
</html>
Running result:
Three: After talking about the above, there is another Jquery $(document).ready(function), which is executed after all the DOM structures in the web page are drawn. Maybe the content associated with the DOM elements has not been loaded. , such as pictures and related height and width settings, etc. At this time, you can consider the load method in jquery to avoid it; in addition, $(document).ready(function) can write unlimited functions, such as:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo float</title>
<script type="text/javascript" src="http://static.ruilife.net/static/js/jquery-1.9.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){ console.log("这是1");});
$(document).ready(function(){ console.log("这是2");});
</script>
</body>
</html>
Running results:
4. document
document.write(_LoadingHtml);
//监听加载状态改变
document.onreadystatechange = completeLoading;
//加载状态为complete时移除loading效果
function completeLoading() {
if (document.readyState == "complete") {
var loadingMask = document.getElementById('loadingp');
loadingMask.parentNode.removeChild(loadingMask);
}
}
Finally summarize:
js: This function will be executed as soon as the window.onload page is run. , when executing this function, the images in the page may not be loaded yet!
jquery: This function is executed after the images or other things in the $(window).load() page are loaded.
The complete format of calling the load method is: load(url, [data], [callback]) The parameters are respectively url address, file type (php, html, etc.), callback function, and also supports selector loading load( "test.html #content id name")
For more programming-related knowledge, please visit: Programming Teaching! !
The above is the detailed content of What is the difference between onload and load in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!