What is the best way to load JS?

Asked

Viewed 581 times

10

I was facing problems with the shipment of JS, mainly by IE8, and I came up with this doubt. I researched a lot, I ended up improving some things.

Currently, I upload all JS files at the bottom of the page, before the tag body.

<body>
    ...
    ...
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="jquery.validate.min.js"></script>
    <script type="text/javascript" src="funcoes.js"></script>
</body>

In case the funcoes.js is where I call (or would like to call) all the functions of the site. And that’s when the problems happen. I have in it for example:

$(document).ready(function(){
    validar();
});

$(window).scroll(function () {
    ...
});

$("#form_contato").validate();

$('.bxslider').bxSlider();

function validar(){
    ...
}

I don’t know if you have any order in calling these functions... I don’t know, for example, when I have to use $(function(){...});.

I always have to keep testing, and sometimes it happens in IE8 some function does not work, then the novel starts to change place (sometimes calling just below the scripts in body between the tags script resolve), then this function works, but another stops working, and then I’ll start doing tests again...

What could I be doing wrong?

javascript jquery
  • 1

    Maybe this one question help. Does not specifically speak of ie8

  • Always put precedence in loading the js, following the above items that are required just after ... by the 3 references of js of your example is not wrong to do so, but, it may be that you are calling item that has not yet been declared. Example: have there in your code bxSlider, Cade the reference of the same ??? Just remember that this is browser independent, if missing the js, mistakes are going to happen ...

  • 1

    This question should also help: http://answall.com/questions/8416/jquery-onload-x-jquery-ondomready

3 answers

8


You need to use a framework that manages file requests for you and does so only on demand, for example the file with the method validar() will be loaded only if the method is actually called, so always request the files in the correct order.

Search for Requirejs: http://requirejs.org/

4

Browsers when loading a page run it from top to bottom right to left. When the browser passes through a javascript file it immediately executes the code of this but however if the functions of Javascript are making use of HTML before the browser arrives and write it gives error.

For our happiness the browser triggers two events:

First - Tells us when a page loaded all the HTML (DOM Ready)

According to - Tells us when a page loaded all images. (Window Load)

When you use functions that deal with HTML, the ideal is to call them only when all the HTML is already loaded DOM Ready

In the case of Jquery you should always start running your Javascript on:

$(document).ready(function(){ 
     Funcao1();
     Funcao2();
     Funcao3();
     //... etc
});

function Funcao1() {}
function Funcao2() {}
function Funcao3() {}

-5

Load the libraries between <head> e </head>. Head content is loaded before the body.

  • 2

    Not always, many javascript codes need the DOM to be ready to be executed, in these cases it is preferable to load right before </body>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.