由于最近在弄echarts,关于地图类的效果,但是全国地图整体的js文件太大了,加载很耗费资源,所以要根据不同省份加载不同地区的js地图,

于是就想的比较简单,

var script = document.createElement ("script")
script.type = "text/javascript";
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);

  直接加载上去了,可是出现一种诡异的效果,当第一次点击一个省份的时候,不出现效果,第二次点击才出现,以后就正常了,点击一次就出现已经点击过的

省份了,瞬间就尴尬了。。。仔细一想,可不是这么玩啊,js文件还没加载完成,就画地图了,所以就 需要时间加载js文件了,想到了 script的onload事件了,但是

这个事件针对ie还有一定的兼容问题,就不是很好玩了,各种试验,各种资料才最后实现了动态加载js,实现完美的效果了。。。

function loadFun(url, callback){
var script = document.createElement ("script")
script.type = "text/javascript";
if (script.readyState){
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else {
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}

  有需要的同学,可以愉快的玩耍一下了...

还可以进入个人博客:www.jishubar.cn

动态加载js文件的更多相关文章

  1. 动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数

    动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...

  2. ExtJS4.x动态加载js文件

    动态加载js文件是ext4.x的一个新特性,可以有效的减少浏览器的压力,提高渲染速度.如动态加载自定义组件 1.在js/extjs/ux目录下,建立自定义组件的js文件. 2.编写MyWindow.j ...

  3. Ext JS学习第十天 Ext基础之动态加载JS文件(补充)

    此文用来记录学习笔记: •Ext4.x版本提供的一大亮点就是Ext.Loader这个类的动态加载机制!只要遵循路径规范,即可动态加载js文件,方便把自己扩展组件动态加载进来,并且减轻浏览器的压力. • ...

  4. javascript动态加载js文件主流浏览器兼容版

    一.代码示例: <html> <head> <meta http-equiv="Content-Type" content="text/ht ...

  5. JavaScript动态加载js文件

    /********************************************************************* * JavaScript动态加载js文件 * 说明: * ...

  6. 动态加载js文件是异步的

    动态加载js文件是异步的. 今天调试一个错误,一个js方法各种调不到. 原因是因为所调方法的js文件是动态加载进来的. <script type="text/javascript&qu ...

  7. 如何动态加载js文件,$.getScript()方法的使用

    有时候我们需要动态在页面中加载js文件,jquery封装了getScript()方法,不用自己再创建标签了. 写法: $.getScript("name.js",function( ...

  8. angular 路由动态加载JS文件

    纯属分享 //把下面代码放在新建JS文件里,引入在头部 //angural路由功能--一个路由动态加载JS (function (name, context, definition) { if (ty ...

  9. 详谈LABJS按需动态加载js文件

    为了提高页面的打开和加载速度,我们经常把JS文件放在页面的尾部,但是有些JS必须放在页面前面,这样就会增加页面的加载时间:于是出现了按需动态加载的概念,这个概念就是当页面需要用到这个JS文件或者CSS ...

随机推荐

  1. web前端安全 XSS跨站脚本 CSRF跨站请求伪造 SQL注入

    web安全,从前端做起,总结下web前端安全的几种技术: 1,XSS XSS的全称是Cross Site Scripting,意思是跨站脚本,XSS的原理也就是往HTML中注入脚本,HTML指定了脚本 ...

  2. Direct3D学习笔记 - 浅析HDR Lighting Sample

    一.HDR简介 HDR(High Dynamic Range,高动态范围)是一种图像后处理技术,是一种表达超过了显示器所能表现的亮度范围的图像映射技术.高动态范围技术能够很好地再现现实生活中丰富的亮度 ...

  3. Minecraft 插件 world edit 的cs 命令

    现在 jar包 http://www.mozilla.org/rhino ,放到classpath 我是放到libs目录中, 1.8 spi 服 @ECHO OFFjava -cp ".;. ...

  4. [VM workstation]VM workstation 中的虚拟机连不上网络

    之前一直没有想到虚拟机连不上网络是VM workstationg 自身的原因. 突然在进入虚拟机时看见提示:VM 桥接网桥无法正常工作 于是便进入 编辑→虚拟网络编辑器 中将虚拟网卡都重置了一下就可以 ...

  5. 初学c# -- 学习笔记(三)

    结合前面学的许多东西,写了一个小程序.会话.自定义滚动条.css等等.小程序没有用数据库,主要不知道该用哪种,以后再说吧.登录也简单,就输入用户名就可以了. 百度是个好东西,写程序时候,需要什么图就直 ...

  6. Markdown 快速入门

    使用Markdown编辑器:MarkdownPad 2 标题: # 标题 ## 标题 ### 标题 #### 标题 ##### 标题 ###### 标题 效果: 标题 标题 标题 标题 标题 标题 下 ...

  7. Dalvik指令格式

    一段Dalvik汇编代码由一系列Dalvik指令组成,指令语法由指令的位描述与指令格式 标识来决定.位描述约定如下: 每16位的字采用空格分隔开来每个字母表示四位,每个字母按顺序从高字节开始,排列到低 ...

  8. nw_socket_handle_socket_event解决

    http://www.bkjia.com/IOSjc/1158465.html 出现问题如下 to a parent directory scheduled for deletion nw_endpo ...

  9. Android中的事件传递机制

    Android源码版本:API Level 19(Android 4.4) Android事件构成 在Android中,事件主要包括点按.长按.拖拽.滑动等,点按又包括单击和双击,另外还包括单指操作和 ...

  10. 【接口测试】jmeter的使用

    学习地址: https://ke.qq.com/webcourse/index.html#course_id=89002&term_id=100088372&taid=15345918 ...