0

javascript の遅延に問題があります。js の遅延に関するGoogle のドキュメントから、次のコードを見つけ、必要に応じて編集しました。

<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 と Google アナリティクスを使用して、自分のページにさらに多くのコードがあることです。

<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 はまだページに含まれておらず、ページの読み込み後に読み込まれるためです。

これは、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 イベントが発生した後、同じ方法を適用して他のファイルのスクリプト オブジェクトを作成する必要があります。ファイルは常に domready の後にある onload に含まれるため、実際に $(document).ready() を使用する必要はもうありません。

<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 に答える