动态加载js文件
由于最近在弄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文件的更多相关文章
- 动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数
动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...
- ExtJS4.x动态加载js文件
动态加载js文件是ext4.x的一个新特性,可以有效的减少浏览器的压力,提高渲染速度.如动态加载自定义组件 1.在js/extjs/ux目录下,建立自定义组件的js文件. 2.编写MyWindow.j ...
- Ext JS学习第十天 Ext基础之动态加载JS文件(补充)
此文用来记录学习笔记: •Ext4.x版本提供的一大亮点就是Ext.Loader这个类的动态加载机制!只要遵循路径规范,即可动态加载js文件,方便把自己扩展组件动态加载进来,并且减轻浏览器的压力. • ...
- javascript动态加载js文件主流浏览器兼容版
一.代码示例: <html> <head> <meta http-equiv="Content-Type" content="text/ht ...
- JavaScript动态加载js文件
/********************************************************************* * JavaScript动态加载js文件 * 说明: * ...
- 动态加载js文件是异步的
动态加载js文件是异步的. 今天调试一个错误,一个js方法各种调不到. 原因是因为所调方法的js文件是动态加载进来的. <script type="text/javascript&qu ...
- 如何动态加载js文件,$.getScript()方法的使用
有时候我们需要动态在页面中加载js文件,jquery封装了getScript()方法,不用自己再创建标签了. 写法: $.getScript("name.js",function( ...
- angular 路由动态加载JS文件
纯属分享 //把下面代码放在新建JS文件里,引入在头部 //angural路由功能--一个路由动态加载JS (function (name, context, definition) { if (ty ...
- 详谈LABJS按需动态加载js文件
为了提高页面的打开和加载速度,我们经常把JS文件放在页面的尾部,但是有些JS必须放在页面前面,这样就会增加页面的加载时间:于是出现了按需动态加载的概念,这个概念就是当页面需要用到这个JS文件或者CSS ...
随机推荐
- 阿里中间件——diamond
一.前言 最近工作不忙闲来无事,仔细分析了公司整个项目架构,发现用到了很多阿里巴巴集团开源的框架,今天要介绍的是中间件diamond. 二.diamond学习笔记 1.diamond简介 diamon ...
- PRML 术语
第一章 target vector t generalization: Once the model is trained it can then determine the identity of ...
- 使用SeasLog打造PHP项目中的高性能日志组件(一)
云智慧(北京)科技有限公司 高驰涛 什么是SeasLog SeasLog是一个C语言编写的PHP扩展,提供一组规范标准的功能函数,在PHP项目中方便.规范.高效地写日志,以及快速地读取和查询日志. 为 ...
- iOS 沙盒(sandbox)结构 使用 实例
声明:该文档是经过自己查找网上的资料以及自己多年的经验后而总结出来的,希望对大家有所帮助,有什么不恰当支出还请大家多指点! iOS中的沙盒机制(SandBox)是一种安全体系,它规定了应用程序只能在为 ...
- Redis学习笔记-初级
1.Redis简介 Redis是一个高效缓存内存数据库,开源.免费.key-value格式 相比于其他key-value格式的缓存产品,特点/优势在于: 支持持久化,可以将内存中的数据保存在磁盘中,重 ...
- [2015hdu多校联赛补题]hdu5384 Danganronpa
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5384 题意:函数f(A, B)定义:A.B为字符串,f(A, B)为A中有多少个不同的B(ex:f(& ...
- Palindrome Pairs
Given a list of unique words. Find all pairs of distinct indices (i, j) in the given list, so that t ...
- Shell学习笔记 - 环境变量配置文件(转)
一.source命令 功能:在当前bash环境下读取并执行配置文件中的命令 1. 命令格式 source 配置文件 或 . 配置文件 2. 命令示例 [root@localhost ~]# sou ...
- URL传递中文乱码的问题
在AJAX浏览器来进行发送数据时,一般它所默认的都是UTF-8的编码. 使用JQUERY中所提供的方法来做操作 encodeURI function verify() { //解决中文乱麻问题的 ...
- AspNetPager分页控件使用方法
一.下载AspNetPager.dll 二.AspNetPager.dll复制于应用程序下的bin目录,打开解决方案,引用dll文件 三. 在工具栏中添加控件,这样可以支持拖拽使用 四. 要使用Asp ...