How to first load/render HTML/CSS and then Javascript (only if it's necessary)?

Question

How to first load/render HTML/CSS and then Javascript? on a page of website/web-app?

So page loading should not seems slow because of javascript. I read about defer and async but not much clear on this topic. Is to keep javascript at bottom enough?

I want to load html/css first because the javascript i added is for further interactions.

For example I have a buttton which do something using javascript. I want to related javascript file only if user click/press that button otherwise not.

I don't want to preload the JavaScript because it's not necessary it will be used or not until it's required

Say what? What do you mean? Load where? In what context? What are you trying to achieve? — Oded, Sep 09 '11 at 20:48
What if you put your stylesheet include right before the end body tag, then put any script files under that. — Dan, Sep 09 '11 at 20:53

score 4 · Answer 1 · edited May 23 '17 at 12:12

Depends on what you are talking about. If you are talking about javascript in the page itself put it at the bottom of the page. If you are referring to loading external libraries you can do so dynamically with javascript.

<script type="text/javascript">
   var hed = document.getElementsByTagName('HEAD').item(0);
    var scrpt = document.createElement("script");

    scrpt.type = "text/javascript";
    scrpt.src = "scriptsource.js";

    hed.appendChild(scrpt);
</script>

More info on this can be found here: http://ntt.cc/2008/02/10/4-ways-to-dynamically-load-external-javascriptwith-source.html

EDIT

You could place your JS inside of the onload event Javascript that executes after page load

score 1 · Answer 2 · answered Dec 11 '17 at 04:28

1

you can also use this Jquery code to make the HTML on your page load first. This will make sure that the HTML is in place for the javascript to load on it.

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

answered Dec 11 '17 at 04:28

Andrew Zoka

21
1

try to use code blocks rather than highlighting the code. – masud_moni Dec 11 '17 at 04:50

score 0 · Answer 3 · answered Sep 09 '11 at 21:01

0

Simply move your <script> tags to the bottom of your page, just before the closing </body> tag

answered Sep 09 '11 at 21:01

Nico Burns

16,639
10
40
54

All javascripts are not possible to keep at bottom. Sometime it necessary to keep inside `` – Jitendra Vyas Sep 09 '11 at 21:04
True, but it will work if you can. Otherwise use jon3laze's solution. – Nico Burns Sep 09 '11 at 22:13

How to first load/render HTML/CSS and then Javascript (only if it's necessary)?

3 Answers3