JS动态插入并立即执行回调函数的方法

 更新时间:2016年04月21日 10:52:13   作者:zhangw428  
这篇文章主要介绍了JS动态插入并立即执行回调函数的方法,实例分析了动态插入js文件及执行回调函数的相关技巧,需要的朋友可以参考下

本文实例讲述了JS动态插入并立即执行回调函数的方法。分享给大家供大家参考,具体如下:

<!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>

动态插入js文件在提高页面加载速度和跨域问题上有非常重要的作用。上面就是一个简单例子。

ie 上支持 onreadystatechange , 不支持 onload

firefox上支持 onload , 不支持onreadystatechange

ie上面不一定loaded 或者是 complete触发 , 或者两个都会触发,所以用或来判断。

需要注意的是script.onreadystatechange 和script.readyState 的大小写形式,不区分大小写就可能导致不易发现的错误。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • js实现贪吃蛇小游戏

    js实现贪吃蛇小游戏

    这篇文章主要为大家详细介绍了js实现贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 根据配置文件加载js依赖模块

    根据配置文件加载js依赖模块

    这篇文章主要介绍了根据配置文件加载js依赖模块,解决方法是笔者自己的思路,抛砖引玉,需要的朋友可以参考下
    2014-12-12
  • JavaScript callback回调函数用法实例分析

    JavaScript callback回调函数用法实例分析

    这篇文章主要介绍了JavaScript callback回调函数用法,结合实例形式分析了callback回调函数的概念、功能、应用场景及相关使用技巧,需要的朋友可以参考下
    2018-05-05
  • MUI实现上拉加载和下拉刷新效果

    MUI实现上拉加载和下拉刷新效果

    这篇文章主要为大家详细介绍了MUI实现上拉加载和下拉刷新效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • js实现将选中内容分享到新浪或腾讯微博

    js实现将选中内容分享到新浪或腾讯微博

    这篇文章主要介绍了js实现将选中内容分享到新浪或腾讯微博,需要的朋友可以参考下
    2015-12-12
  • 常用的JavaScript模板引擎介绍

    常用的JavaScript模板引擎介绍

    这篇文章主要介绍了常用的JavaScript模板引擎介绍,本文介绍了8款常用JavaScript 模板引擎,着重讲解了artTemplate模板引擎,需要的朋友可以参考下
    2015-02-02
  • 如何改进javascript代码的性能

    如何改进javascript代码的性能

    在web应用中,应用了大量的Javascript,因此代码的执行效率变得尤为重要,也就是性能!为了提高JS的性能,我们应该掌握一些基本的性能优化方式,并让它成为我们书写代码的习惯。下面介绍几种优化性能的方式,很多初学者甚至有经验的开发者也会忽略,希望对你有帮助
    2015-04-04
  • js实现选中复选框文字变色的方法

    js实现选中复选框文字变色的方法

    这篇文章主要介绍了js实现选中复选框文字变色的方法,涉及javascript鼠标事件及页面元素的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 动态创建script在IE中缓存js文件时导致编码的解决方法

    动态创建script在IE中缓存js文件时导致编码的解决方法

    这篇文章主要介绍了动态创建script在IE中缓存js文件时导致编码的解决方法,需要的朋友可以参考下
    2014-05-05
  • 用js编写简单的贪吃蛇小游戏

    用js编写简单的贪吃蛇小游戏

    这篇文章主要为大家详细介绍了用js编写简单的贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论