How to dynamically insert JS and execute callback function immediately

How to dynamically insert JS and execute callback function immediately_javascript skills

WBOY

Release： 2016-05-16 15:04:33

Original

1600 people have browsed it

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>

Copy after login

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.