Execute JavaScript code at the end when the HTML has been loaded

Question

I want to execute a function at the end when the HTML has been loaded. I tried it with onload without success. I also tried it with ready, but it still doesn’t work. Here is my code. This is again placed in the header:

<script type="text/javascript">
    $(document).ready(function() {
        $('#infowindow_content').html('test');
    });
</script>

The div is also set by an external JavaScript file. Content:

window.onload = initialize;

function initialize() {
    document.getElementById('infowindow_content').innerHTML = 'testa';
}

It is included the following way before the closing body tag:

<script type="text/javascript" src="../lib/functions.js"></script>

I tried to place the above code before the closing body tag, but currently I have no idea why this doesn't work (the content isn't changed by my JavaScript code). If I execute it on the console afterwards everything works fine.

Solution:

I set a configuration parameter (language) in the HTML file. In the JavaScript file I ask for this value and depending on the value I define another content. Sometimes it could be so simple ...

@woz I'm guessing it means that #infowindow_content is created through js — qwertymk
– qwertymk, Commented Jul 12, 2012 at 17:43
@woz: I have before the closing tag included a JS-file with which the content of the div is set. Now I want to overwrite this content. — testing
– testing, Commented Jul 12, 2012 at 17:43
@Pointy: The content isn't changed. With the console I can easily change the content, but this should be made automatically. — testing
– testing, Commented Jul 12, 2012 at 17:45

qwertymk · Accepted Answer · 2012-07-12 17:41:35Z

5

Try this:

setTimeout(function() {
 $(document).ready(function() { 
     $('#infowindow_content').html('test');
 });
}, 20);

answered Jul 12, 2012 at 17:41

qwertymk

35.6k31 gold badges127 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pointy Over a year ago

If the somewhat cryptic allusion to the "JS-file" means that there's another script somewhere overwriting the work of the code in the OP, then this could definitely help.

testing Over a year ago

This code worked. But I don't know why I need something like this. What's the reason or what I'm doing wrong?

qwertymk Over a year ago

@testing since the div is being added a-la javascript, there is no load or ready event for it. However if you wait 20 ms for all the js to execute then jQuery can find the div that your other js created

testing Over a year ago

@qwertymk: The div is already there in HTML as placeholder. So it should be found I mean. The external JS file can set the content with document.getElementById('infowindow_content').innerHTML = 'test' and than I try with jQuery to set the content again. I also tried the Javascript way with the same results. But I think your solution is the only one which works.

testing Over a year ago

FYI: Your code only works in between $(document).ready(function() {.

ShouravBR · Accepted Answer · 2012-07-12 17:53:37Z

1

I don't know the jQuery equivalent but try the native JS.

Since the <body> has the most HTML & loads after <head>...

document.body.onload=function(){
    yourFunction(args)
}
<body onload="yourFunction(args)">...</body>

Or maybe the window object, since it's the root of every webpage DOM...

window.onload=function(){
    yourFunction(args)
}

answered Jul 12, 2012 at 17:53

community wiki

ShouravBR

Comments

Peter Mortensen · Accepted Answer · 2021-11-21 13:13:52Z

0

Always place DOM manipulating code directly before your </body> tag. JavaScript in the header should only be called to libraries, such as jQuery.

edited Nov 21, 2021 at 13:13

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jul 12, 2012 at 17:42

Andrew McGivery

1,4008 silver badges21 bronze badges

3 Comments

Pointy Over a year ago

Common wisdom is to put the scripts at the end of the <body> so that their evaluation doesn't delay page rendering.

Andrew McGivery Over a year ago

Reason for this is that it allows all of the DOM to be parsed before it tries to manipulate it, and overall improves loading time.

Pointy Over a year ago

Oh sorry; the </body> in your answer was hidden because it was unquoted :-)

Collectives™ on Stack Overflow

Execute JavaScript code at the end when the HTML has been loaded

3 Answers 3

5 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related