4

How can I make jQuery run when my webpage has finished loading?

This is not what I want. All that this does is wait for the page to finish loading before any Javascript CAN be run.

$(document).ready(function(){ //Code here });

What I want is for this to run when the page loads. I don't want it to wait for 'click' or 'change'. Can I add a 'load' or something to this?

$(document).on("change", "#input", function(e) { $("#output").val($(this).val()); });

A workaround I have been using is to use jQuery to "change" the selected option on a select box, thereby triggering the code I actually want to run.

I have seen a bunch of questions like this, but every time the answer just says to use $(document).ready(function(){//Code}); which is not what I'm looking for.

Any ideas?

EDIT: Here is a better example of what I'm looking for.

This code below will run when the element with the id of 'input' is clicked. That is the only time it will run. I would like for it to run as soon as it is ready - as soon as $(document).ready(function(){}); can run it.

$(document).ready(function(){ $(document).on("change", "#input", function(e) { $("#output").val($(this).val()); }); });

I think that this would work, but I was hoping for a nicer solution and one that doesn't require me to rewrite everything as functions.

$(document).ready(function(){ function runWhenReady(){ $("#output").val($(#input).val()); } $(document).on("change", "#input", function(e) { runWhenReady(); }); runWhenReady(); });

I think that this will run runWhenReady() when #input is clicked, and when the page finishes loading. My question is, is there a simpler way to do this?

Improve this question
4
  • define webpage has finished loading and we might be able to help. Commented Apr 6, 2017 at 17:57
  • Maybe you need to specify better what you mean when you say "finished loading". The ready event for instance is triggered when the DOM is ready. You want to wait for the images to load? Commented Apr 6, 2017 at 17:57
  • @Hodrobond I'm looking for something similar to change that I can add to the .on() method so that my 'function' will run after the page has loaded. This function (the one above) will already be wrapped in $(document).ready(function(){}); Commented Apr 6, 2017 at 18:02
  • @Romulo I edited my question. Commented Apr 6, 2017 at 18:15

5 Answers 5

Reset to default
4

I think you're looking for $(window).load()

$(window).load(function(e){ // code here });

Answer to your question in the comments:

$(document).on('click', '#input', function(e){ $('#output').val($(this).val()); });
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I think this does almost the same thing as $(document).ready(function(){}); which is not really what I was looking for..
How would I go about calling $("#output").val($(#input).val()); when the page has finished loading, and whenever #input is clicked?
You should do $(document).on('click', '#input', function(e){ $('#output').val($(this).val()) })
I don't think that works. That will trigger when clicked, but it won't run unless it is clicked.
3

I think the only way to do what I want is to name the function and call it two different ways.

$(document).ready(function(){ function xyzzy(){ $("#output").val($(#input).val()); } //Call the function when #input is clicked $(document).on("change", "#input", function(e) { xyzzy(); }); //Call the function when the page loads xyzzy(); });

This will call the function when the page has finished loading, as well whenever #input is clicked.

Improve this answer

Comments

0

Can I add a 'load' or something to this?

yes you can which will like $(window).on( "load", handler )

Also there is not much difference between the above code and 

$( window).load(function() { // Handler for .load() called. });

The first method is just short cut of the second one

Improve this answer

Comments

0

$(document).ready happens when all the elements are present in the DOM, but not necessarily all content.

$(document).ready(function() { alert("document is ready"); });

window.onload vs document.onload

window.onload or $(window).load()

happens after all the content resources (images, etc) have been loaded.

$(window).load(function() { alert("window is loaded"); });
Improve this answer

2 Comments

Okay, so how would I go about calling $("#output").val($(#input).val()); when the page has finished loading, and whenever #input is clicked?
add inside $(document).ready(function(){$( '#input').click( function(){ $('#output').val($(this).val()) })} which reads all function with load than call whenever you want.
0

From your Example:

$(document).ready(function(){ function runWhenReady(){ $("#output").val($(#input).val()); } $(document).on("change", "#input", function(e) { runWhenReady(); }); runWhenReady(); });

You could write:

$("#input").on("change", function() {...});

which defines a handler for your input. Everytime you change the value in the input it will call the function passed as argument. That make the whole $(document)... unneccessary.

If you want to run the function just once, as soon as possible wrap it in a IIFE like:

(function(){...});

Here is a pretty good blog post about IIFE: http://benalman.com/news/2010/11/immediately-invoked-function-expression/

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.