js および css ファイルの js コードを非同期で動的にロードする_javascript スキル

jquery を使用して CSS ファイルと js ファイルを動的にロードする方法は非常に簡単です。

例

方法 1:

コードは次のとおりです

コードをコピーします コードは次のとおりです:

$ .getscript("test.js");

方法 2:

コードは次のとおりです

コードをコピーします コードは次のとおりです:

関数loadjs(ファイル){

var head = $('head').remove('#loadscript');

$("" "").attr({src:file,type:'text/javascript',id:'load'}).appendto （頭）

}

方法 3:

コードは次のとおりです

コードをコピーします コードは次のとおりです:

$ ("" "").attr({src:file,type:'text/javascript',id:'load'}).appendto($(' head').remove( '#loadscript'));

以下に、js および css ファイルを動的にロードするためのいくつかのメソッドを添付します。

次のコードは、news.qq.com ページのコードから抜粋したものです。私はテストしていませんが、このプログラムは主に js ファイルを動的にロードするために使用されます。 Web ページの下部にある コードは次のとおりです。

コードは次のとおりです

コードをコピーします コードは次のとおりです:

<script><br> var SCRIPT_TIMEOUT = 20000;<br>var QVPL_PATH = "/QVPL1.0.0.js";<br> functionloadHelper (jsurl) {<p>var oScriptEl, oTimeoutHDL, oHead;<br>oScriptEl = document.createElement("script");<br>oScriptEl.type = "text/javascript";<br>oScriptEl . language = "javascript";<br>oScriptEl.src = jsurl;<br>oScriptEl.onreadystatechange = doCallback;<br> </p>oScriptEl.onload = function()<p>{<br>this.readyState = "complete";<br>doCallback();<br>if(typeof(lianbo) == "object"){<br>lianbo.init(window.QVPL);<br>}<br>};<br> </p>oTimeoutHDL = window.setTimeout(doError,SCRIPT_TIMEOUT);<p>document.getElementsByTagName("head")[0].appendChild(oScriptEl);<br> </p>function doCallback()<p>{<br>if (oScriptEl.readyState == "complete" || oScriptEl.readyState == "loaded")<br>{<br>oScriptEl.onload = oScriptEl.onreadystatechange = new Function();<br>window.clearTimeout(oTimeoutHDL);<br>}<br>};<br> </p>関数 doError()<p>{<br>oScriptEl.parentNode.removeChild(oScriptEl);<br>};<br>}<br> </p>loadHelper(QVPL_PATH);<p></script>