How to make JavaScript to load after page loading - tried all solutions

Question

I have a problem with my site - http://toppages.co.uk ( built with CakePHP framework) I want to load the javascript after page loading is finished ( Google PageSpeed Insights suggestion), so i moved the entire JavaScript to the footer. Then, after making some tests, i found that JavaScript dones't work properly when is placed to the footer - it loads some times,but some times not.

I tried all possible solutions - first with: document.onload = function..,then tried: <body onload="script();"> ,after that tried to load javascript asynchronously with "async" function - notging helps. So far i can't find a way to make it work. Do you have an idea what couse the problem and how can i fix it ?

When you say it didn't work you don't mean jQuery didn't load, do you? It's just that some functions didin't work? If you have functions calls early in the page before footer and you load jQuery in footer, those functions won't work. — artm, Nov 13 '14 at 23:43
I forgot to tell you that I moved entire JavaScript from all pages to default view file — user3551564, Nov 13 '14 at 23:57

elzi · Answer 1 · 2014-11-13T23:57:47.037

0

Try

document.addEventListener('DOMContentLoaded', function(){
    // code here
});

Apparently in IE7 there's no good way to tell, but here's a hack, found here

if (document.all && !window.opera){ //Crude test for IE
//Define a "blank" external JavaScript tag
  document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>')
  var contentloadtag=document.getElementById("contentloadtag")
  contentloadtag.onreadystatechange=function(){
    if (this.readyState=="complete")
      // do stuff here
  }
}

edited Nov 13 '14 at 23:57

answered Nov 13 '14 at 23:36

elzi

5,442
7
37
61

Hi Elzi,i tried that too ,but doesn't work. The strange thing is that JavaScript works most of the time on Firefox, but not on Chrome and IE. Also when tried: " document.addEventListener " - IE gives me an error and JavaScript doens't load at all ( i'm using IE7 of XP). – user3551564 Nov 13 '14 at 23:53
IE7? Ooof. Yeah you need `attachEvent` instead – elzi Nov 13 '14 at 23:55
I didn't tried that - do you think that this function will work on all browsers? – user3551564 Nov 13 '14 at 23:58
No. Why not just do an if else, detect if IE7, else do all others? – elzi Nov 14 '14 at 00:00
This is a good suggestion, let me try your solution and will update you soon with the results. – user3551564 Nov 14 '14 at 00:02
I would use a better qualifier for IE7 though. Try `navigator.userAgent.match(/MSIE [67]\.(?!.*Trident[1-9])/)` – elzi Nov 14 '14 at 00:03

score 0 · Answer 2 · answered Nov 14 '14 at 00:00

I had this issue before and it was that at the time I was loading jQuery from google, for some reason it didn't load from google. I'm not sure if you have the same issue but what you can try is something like this, if can't load from google, then load local.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
if (!window.jQuery) {
    document.write('<script src="/script/jquery.1.11.0.min.js"><\/script>');
}
</script>

Yes,i'm also using Google to load it. I will try to load it locally and see what happens — user3551564, Nov 14 '14 at 00:04

score 0 · Answer 3 · edited May 23 '17 at 12:12

The difference between onload and onready is that onload is in charge of a specific element. and onready is working on the entire page. window.onload vs $(document).ready()
in this case I'would recommend to add jQuery to your page and use
$(document).ready(function () {/*code you'd like to execute*/});
just by inserting <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> at the bottom of your body tag.

How to make JavaScript to load after page loading - tried all solutions

3 Answers3