I want to trigger one event on page load complete using javascript/jquery.
Is there any way to trigger event or call a simple function once page loading fully completes.
Please suggest folks if you any reference.
This question is related to
javascript
jquery
html
$(document).ready( function() { YOUR CODE HERE } )
jQuery:
$(function(){
// your code...this will run when DOM is ready
});
If you want to run your code after all page resources including images/frames/DOM have loaded, you need to use load event:
$(window).load(function(){
// your code...
});
JavaScript:
window.onload = function(){
// your code...
};
This will call function when the DOM structure is ready
$(document).ready(function () {
userCommission();
//Show commision box
$('#userroles').change(function(){
userCommission();
});
function userCommission() {
var roles = $('#userroles').val();
var result = roles.map(function (x) {
return parseInt(x, 10);
});
var i = result.indexOf(6);
console.log(i);
if(i == -1) {
console.log('inside');
$('.user-commission :input').attr("disabled", true);;
$('#user-commission').hide();
}
} });
You may also use the defer attribute in the script tag.
As long as you do not specify async which would of course not be useful for your aim.
Example:
<script src="//other-domain.com/script.js" defer></script>
<script src="myscript.js" defer></script>
As described here:
In the above example, the browser will download both scripts in parallel and execute them just before DOMContentLoaded fires, maintaining their order.
[...] deferred scripts should run after the document had parsed, in the order they were added [...]
Related Stackoverflow discussions: How exactly does <script defer=“defer”> work?
The below code will call a function while the script is done loading
<html>
<body></body>
<script>
call();
function call(){ alert("Hello Word");}
</script>
</html>
When the page loads totally (dom, images, ...)
$(window).load(function(){
// full load
});
When DOM elements load (not necessary all images will be loaded)
$(function(){
// DOM Ready
});
Then you can trigger any event
$("element").trigger("event");
Isn't
$(document).ready(function() {
});
what you are looking for?
The windows.load function is useful if you want to do something when everything is loaded.
$(window).load(function(){
// full load
});
But you can also use the .load function on any other element. So if you have one particularly large image and you want to do something when that loads but the rest of your page loading code when the dom has loaded you could do:
$(function(){
// Dom loaded code
$('#largeImage').load({
// Image loaded code
});
});
Also the jquery .load function is pretty much the same as a normal .onload.
$(document).ready(function() {
// do needed things
});
This will trigger once the DOM structure is ready.
Source: Stackoverflow.com