Home  >  Article  >  Web Front-end  >  Asynchronously dynamically load js code for js and css files_javascript skills

Asynchronously dynamically load js code for js and css files_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:22:311189browse

The method of dynamically loading css and js files with jquery is very simple,

Example

Method 1:

The code is as follows

Copy code The code is as follows:

$.getscript("test. js");

Method 2:

The code is as follows

Copy code The code is as follows:

function loadjs(file){

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

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

}

Method 3:

The code is as follows

Copy code The code is as follows:

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

Attached below are some methods for dynamically loading js and css files.

The following code is excerpted from the code on the news.qq.com page. I have not tested it. The program seems to be fine and can be used as a reference. It is mainly used to dynamically load js files at the bottom of the web page. Go to the back of the tag of the web page and implement it through DOM. The code is as follows:

The code is as follows

Copy the code The code is as follows:

<script><br> var SCRIPT_TIMEOUT = 20000;<br>var QVPL_PATH = "/QVPL1.0.0.js"; <p>function loadHelper (jsurl) {<br>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;</p> <p>oScriptEl.onload = function()<br>{<br>this.readyState = "complete";<br>doCallback();<br>if(typeof(lianbo) == "object"){<br>lianbo.init(window.QVPL);<br>}<br>};</p> <p>oTimeoutHDL = window.setTimeout(doError,SCRIPT_TIMEOUT);<br>document.getElementsByTagName("head")[0].appendChild(oScriptEl);</p> <p>function doCallback()<br>{<br>if (oScriptEl.readyState == "complete" || oScriptEl.readyState == "loaded")<br>{<br>oScriptEl.onload = oScriptEl.onreadystatechange = new Function();<br>window.clearTimeout(oTimeoutHDL);<br>}<br>};</p> <p>function doError()<br>{<br>oScriptEl.parentNode.removeChild(oScriptEl);<br>};<br>}</p> <p>loadHelper(QVPL_PATH);<br></script>

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn