The best way to run a function javascript in page load

Question

please don't duplicate me with: $(document).ready equivalent without jQuery

My question have a little difference. I will explain about this. I has been put all my function on ready funtion like this.

$(document).ready(function () {
 $("#liLanguage").find("a").click(function () {
            ChangLanguage(this);
        });
// orther a lot of function here
   LoadDataToGrid();
}

It's done well But, yesterday my PM said: "you don't need put your code in the ready function, you can run without ready function, put in ready function is very crazy and stupid."

I has been read more topic about ready function and window.onload() function. But no where say that we can't run a function in ready funtion. What's wrong with my code when i put all function in ready funtion?.

This is better

$(document).ready(function () {
 $("#liLanguage").find("a").click(function () {
            ChangLanguage(this);
        });
}

Or this is better( without ready function)

$("#liLanguage").find("a").click(function () {
            ChangLanguage(this);
        });

Neither "crazy" nor "stupid" are valid criticisms. If there is a real problem with a piece of code, a critic should be capable of explaining the difficulty caused by using it. — Alohci, Oct 21 '17 at 01:30
Thanks, by the way. Can you tell me run without ready function better or in ready function better? I see all's well done — A Good Boy, Oct 21 '17 at 01:59
If the code shown were included in a script element after the `#liLanguage` element (e.g., at the end of the body), then both versions will work. If the code shown were included in a script element *before* the `#liLanguage` element then only the one with the ready handler would work. — nnnnnn, Oct 21 '17 at 03:32

score 5 · Answer 1 · answered Oct 21 '17 at 01:27

5

Usually, PMs don't have an engineering background and they like to talk like they do. Try to watch for that.

Now to answer your question, you can simply add your script in the bottom of the HTML instead of in the head. That way your script will load after the DOM is ready each is basically what document.ready does.

answered Oct 21 '17 at 01:27

Vinicius Santana

3,216
2
23
39

Thanks, I already added my script in the bottom of the HTML, is your mean my code no wrong? – A Good Boy Oct 21 '17 at 01:35
1

Nothing wrong with your code. Look at this other answer: https://stackoverflow.com/questions/6026645/document-readyfunction-vs-script-at-the-bottom-of-page – Vinicius Santana Oct 21 '17 at 01:38

score 2 · Accepted Answer · answered Oct 23 '17 at 02:21

I think, you put in ready function will better because it's independent where you put your code. For example:

Example 1:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
   $(document).ready(function () {
        Test();
    });
    function Test() {
       $("#test").click(function (){
            console.log(2);
       })
    }
</script>
</head>
<body>
<input type = "button" id ="test" value = "Test">
</body>
</html>

But it will not run if you put code like this.

Example 2:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    Test();
    function Test() {
       $("#test").click(function (){
            console.log(2);
       })
    }
</script>
</head>
<body>
<input type = "button" id ="test" value = "Test">
</body>
</html>

It will run ok if you put your script after html.

Example 3:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type = "button" id ="test" value = "Test">
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    Test();
    function Test() {
       $("#test").click(function (){
            console.log(2);
       })
    }
    </script>

It's mean: with example 1 you can put javascript any where, you don't need to care about it.

The best way to run a function javascript in page load

2 Answers2