0

我在延迟 javascript 时遇到了一些问题。从谷歌关于延迟 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 和谷歌分析

<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 文件可能会因为可缓存而受益。

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

4

1 回答 1

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>
于 2013-04-21T00:43:00.917 回答