search

Home  >  Article  >  Web Front-end  >  How to dynamically insert JS and execute callback function immediately_javascript skills

How to dynamically insert JS and execute callback function immediately_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:04:331561browse

The example in this article describes the method of dynamically inserting JS and executing the callback function immediately. Share it with everyone for your reference, the details are as follows: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="loading">加载中……</div>
<mce:script type="text/JavaScript">
<!--
function loadJs(id,url,callback){
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = url;
 script.id = id;
 script.onload = script.onreadystatechange = function(){
  alert(script.readyState);
  if(script.readyState && script.readyState != 'loaded' && script.readyState != 'complete') return ;
  script.onreadystatechange = script.onload = null
  if(callback) callback();
 }
 document.body.appendChild(script);
}
loadJs('jQuery','jquery.js',function(){$('#loading').html('jquery.js加载完毕')})
// --></mce:script>
</body>
</html>

Dynamic insertion of js files plays a very important role in improving page loading speed and cross-domain issues. The above is a simple example.

Onreadystatechange is supported on ie, but onload is not supported

Onload is supported on Firefox, but onreadystatechange is not supported

ie, it is not necessarily loaded or complete trigger, or both will be triggered, so use or to judge.

It should be noted that the case form of script.onreadystatechange and script.readyState is not case-sensitive, which may lead to errors that are not easy to find.

Readers who are interested in more JavaScript-related content can check out the special topics on this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm techniques", "Summary of JavaScript animation special effects and techniques", "Summary of JavaScript errors and debugging skills", "Summary of JavaScript data structures and algorithm techniques", "JavaScript traversal Summary of Algorithms and Techniques" and "Summary of JavaScript Mathematical Operation Usage"

I hope this article will be helpful to everyone in JavaScript programming.

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
Previous article：Differences in JavaScript syntax between IE and Firefox_javascript tipsNext article：Differences in JavaScript syntax between IE and Firefox_javascript tips

Related articles

See more