Question

我的网站存在问题 - http://toppages.co.uk（使用CakePHP框架构建）我想在页面加载完成后加载javascript（Google PageSpeed Insights建议），所以我将整个JavaScript移动到页脚。然后，在进行一些测试之后，我发现JavaScript在放置到页脚时无法正常工作 - 它会加载一些时间，但有时却没有。

我尝试了所有可能的解决方案 - 首先： document.onload = function..，然后尝试：<body onload="script();">，之后尝试与"async"函数异步加载javascript - notging帮助。到目前为止，我找不到让它工作的方法。你知道这个问题是什么以及如何解决它？

Answer 1

尝试

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

显然在IE7中没有好的方法可以告诉，但是这里有一个黑客，找到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
  }
}

Answer 2

之前我遇到过这个问题，当时我正在从谷歌加载jQuery，因为某些原因它没有从谷歌加载。我不确定你是否有同样的问题，但你可以尝试的是这样的，如果无法从谷歌加载，然后加载本地。

<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>

Answer 3

onload和onready之间的区别在于onload负责特定元素。并且onready正在整个页面上工作。 window.onload vs $(document).ready()
在这种情况下，我建议将jQuery添加到您的页面并使用
$(document).ready(function () {/*code you'd like to execute*/});
只需在身体标记的底部插入<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>即可。

如何在页面加载后加载JavaScript - 尝试了所有解决方案

3 个答案: