js异步执行 按需加载 三种方式
js异步执行 按需加载 三种方式
第一种:函数引用 将所需加载方法放在匿名函数中传入
//第一种 函数引用
function loadScript(url,callback){
//创建一个js
var script=document.createElement("script");
script.type="text/javascript";
if(script.readyState){
//执行demo.js中的方法 判断当异步加载完后才执行demo.js中的方法 IE使用
script.onreadystatechange=function(){
if(script.readyState=="conplete"||script.readyState=="loaded"){
callback();
}
}
}else{
//执行demo.js中的方法 判断当异步加载完后才执行demo.js中的方法 Chrome Safari Opera Firefox使用
script.onload=function(){
callback();
}
}
script.src=url;
//将js加载到页面上去
document.head.appendChild(script);
} loadScript("demo.js",function(){ //函数引用 将需要实现的方法传入
test();
})
第二种:eval 会把字符串当做函数代码来执行 将使用方法以字符串形式传入进去(不推荐)
//第二种 eval
function loadScript(url,callback){
//创建一个js
var script=document.createElement("script");
script.type="text/javascript";
if(script.readyState){
//执行demo.js中的方法 判断当异步加载完后才执行demo.js中的方法 IE使用
script.onreadystatechange=function(){
if(script.readyState=="conplete"||script.readyState=="loaded"){
eval(callback);
}
}
}else{
//执行demo.js中的方法 判断当异步加载完后才执行demo.js中的方法 Chrome Safari Opera Firefox使用
script.onload=function(){
eval(callback);
}
}
script.src=url;
//将js加载到页面上去
document.head.appendChild(script);
} loadScript("demo.js","test()");
demo.js:
function test(){
console.log("a")
}
第三种 与函数库相配合
//第三种 与函数库相配合
function loadScript(url,callback){
//创建一个js
var script=document.createElement("script");
script.type="text/javascript";
if(script.readyState){
//执行demo.js中的方法 判断当异步加载完后才执行demo.js中的方法 IE使用
script.onreadystatechange=function(){
if(script.readyState=="conplete"||script.readyState=="loaded"){
tools[callback]();
}
}
}else{
//执行demo.js中的方法 判断当异步加载完后才执行demo.js中的方法 Chrome Safari Opera Firefox使用
script.onload=function(){
tools[callback]();
}
}
script.src=url;
//将js加载到页面上去
document.head.appendChild(script);
} loadScript("demo.js","test");
demo.js
var tools={
"test":function(){
console.log("a");
},
"demo":function(){
console.log("b");
}
}
js异步执行 按需加载 三种方式的更多相关文章
- vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...
- iOS字体加载三种方式
静态加载 动态加载 动态下载苹果提供的多种字体 其他 打印出当前所有可用的字体 检查某字体是否已经下载 这是一篇很简短的文章,介绍了 iOS 自定义字体加载的三种方式. 静态加载 这个可以说是最简单最 ...
- entity framework 数据加载三种方式的异同(延迟加载,预加载,显示加载)
三种加载方式的区别 显示加载: 显示加载
- vue的异步组件按需加载
当build打包后,app.js过大的时候,可以考虑用异步组件的方式. import HomeHeader from "./components/Header"; import H ...
- flask配置加载几种方式
方法一.直接配置 app.config['HOST']='xxx.a.com' print(app.config.get('HOST')) 方法二.通过环境变量加载配置 环境变量:export MyA ...
- Windows学习总结(8)——DOS窗口查看历史执行过的命令的三种方式
在DOS窗口执行了一些列命令完成某项工作后,如果要查看都执行了那些命令,该如何办呢?(前提:DOS窗口未关闭的情况下) 一.方法一: 使用↑↓箭头上下翻看执行过的命令,此方式适宜执行命令较少的情况. ...
- Flask的配置文件加载两种方式
配置文件 1 基于全局变量 2 基于类的方式 配置文件的加载需要将配合文件的相对路径添加到app.config.from_object("文件路径"),类的方式也是一样,需要将类的 ...
- js中将字符串转换成json的三种方式
1,eval方式解析,恐怕这是最早的解析方式了.如下: function strToJson(str){ var json = eval('(' + str + ')'); return json; ...
- JS创建对象,数组,函数的三种方式
害怕自己忘记,简单总结一下 创建对象的3种方法 ①:创建一个空对象 var obj = {}; ②:对象字面量 var obj = { name: "Tom", age: 27 ...
随机推荐
- 解决pycharm打开html页面一直刷新
顺序——> File ——>Project:项目名——>project Structure 右侧的 + Add ContentRoot下面只保留本项目路径,其他全删了 方法2(推荐) ...
- delphi制作res文件
第一步:将brcc32.exe拷贝到某个目录,如“res文件”第二步:制作rc文件1.在“res文件”中新建一个文本文件resources.rc:2.文本文件中每一行写一个资源,资源格式为:资源标识名 ...
- 对CAN signal 的一点理解
首先每个 ECU是一个网络节点,每个网络节点可收发一些 Message,每个Message 由CAN signals构成.每个 CAN signal利用一个或多个连续的2进制位来表示承载的信息.下 ...
- 让div充满整个body
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- h5笔记1
1.HTML中不支持 空格.回车.制表符,它们都会被解析成一个空白字符 2.适用于大多数 HTML 元素的属性: class 为html元素定义一个或多个类名(classname)(类名从样式文件引入 ...
- MySQL索引底层数据结构
一.何为索引? 1.索引是帮助数据库高效获取数据的排好序的数据结构. 2.索引存储在文件中. 3.索引建多了会影响增删改效率. (下面这张图为计算机组成原理内容,每查询一次索引节点,都会进行一次磁盘I ...
- 剑指offer-面试题60-n个骰子的点数-动态规划
/* 题目: 计算n个骰子,出现和s的概率. */ #include<iostream> #include<cstdlib> #include<stack> #in ...
- javaSE学习笔记(16)---网络编程
javaSE学习笔记(16)---网络编程 基本概念 如今,计算机已经成为人们学习.工作.生活必不可少的工具.我们利用计算机可以和亲朋好友网上聊天,也可以玩网游.发邮件等等,这些功能实现都离不开计算机 ...
- (LNMP) Nginx_PHP_MariaDB
L用的是Centos7.5以上,主要是NMP三组件的安装记录. 通常会先安装一下依赖: yum install -y pcre-devel zlib-devel openssl-devel 使用yum ...
- aov.h-1.1
//AOV网与拓扑排序类 #ifndef _AOV_H_ #define _AOV_H_ #include<iostream> #include<cstdio> #includ ...