Question

我在推迟javascript方面遇到了一些问题。从Google's docs关于延迟js，我发现了以下代码，根据我的需要进行了编辑：

<script type='text/javascript'>
function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js";
    document.body.appendChild(element);
    var element2 = document.createElement("script");
    element2.src = "jquery.validate.js";
    document.body.appendChild(element2);
    var element3 = document.createElement("script");
    element3.src = "fancybox/jquery.fancybox.pack.2.1.4.js";
    document.body.appendChild(element3);
 }

if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

此代码将3 .js文件添加到页面中，并显示在检查器中。现在的问题是我的页面上有更多的代码，使用jquery＆amp;谷歌分析

<script type='text/javascript'>
$(document).ready(function(){
   //some code
});
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '*********']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

现在我已将所有代码放入//some code部分，因此用于初始化fancybox和添加事件侦听器的代码。现在我遇到的一个问题是刷新时，有时我会得到 Uncaught ReferenceError: jQuery is not defined 。我只能假设这是因为其他文件在jQuery文件之前加载。我该怎么解决这个问题？

此外，main.js（页面上是否需要所有其他js代码的.js文件）中的代码是否仍然需要在$(document).ready(function(){...});中？我以前在php中的代码之间放了很多javascript，所以如果不需要它就不需要发送到页面，但我想使用外部.js文件可能会因为可缓存而受益。 / p>

并且旁注：明显使用bar.js?v=1.0进行版本控制是不好的（根据El Goog，因为一些代理不会缓存它），所以最好的方法是始终更改文件名，如下所示：bar.1.0.js？

Answer 1

当您调用“$（document）.ready（function（）{”时，不会加载jQuery，因为它尚未包含在页面中，但在页面加载后加载。

这可以通过在jquery文件加载完成后执行所有代码来解决：

<script type='text/javascript'>
var element = document.createElement("script");
function downloadJSAtOnload() {
    element.src = "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js";
    document.body.appendChild(element);
    var element2 = document.createElement("script");
    element2.src = "jquery.validate.js";
    document.body.appendChild(element2);
    var element3 = document.createElement("script");
    element3.src = "fancybox/jquery.fancybox.pack.2.1.4.js";
    document.body.appendChild(element3);
}

if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

<script type="text/javascript">
// Quick and dirty implementation, you should check for all the included files to be done loading, and create some sort of object that triggers an event that is called when alle the files are loaded
element.onload = function {
  $(document).ready(function() { ... });
}
</script>

[编辑]：在jQuery之前加载jQuery依赖文件：在jQuery脚本onload事件触发后，你必须应用相同的方法并创建其他文件的脚本对象。你确实不应该再使用$（document）.ready（）了，因为文件包含在onload中，而且总是在domready之后。

<script type='text/javascript'>
function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js";
    document.body.appendChild(element);

    element.onload = function() {
      /jQuery is ready, now load the files that build on the jQuery framework
      var element2 = document.createElement("script");
      element2.src = "jquery.validate.js";
      document.body.appendChild(element2);
      var element3 = document.createElement("script");
      element3.src = "fancybox/jquery.fancybox.pack.2.1.4.js";
      document.body.appendChild(element3);
   }
}

if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

推迟javascript与jquery问题和版本控制

1 个答案: