js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 ,
做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了,导致出错。
后来使用此法,保证了任何时候都完全是按照js的先后顺序执行的。

源码:

/**
* js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面
* 原理:利用 ajax 异步多线程快速加载, 每个文件加载完成后存入到加载完成数组中,
* 显示到页面时完全按传入的顺序加入到页面
* @param {array} files 要加载的文件列表,显示时也按照此顺序一个一个加入到页面
* @param {fun} funOk 加载完成后的回调
* @param {fun} funPercent 加载过程中的回调
*/
function ajaxLoadJs(files,funOk,funPercent) {
var fileData = [];//记录加载完的文件
var oknum = 0 ; //加载完成的数量
//循环异步加载文件
for (var i = 0; i < files.length; i++) {
loadfile(files[i]);
}
//加载文件
function loadfile(file) {
$.ajax({
url: file,
dataType: "text",
success: function (data) {
oknum++;
fileData[file] = data; //加载成功写入数组
loadok(file);//调用成功后的处理
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log("加载失败:"+file)
console.log(textStatus)
console.log(errorThrown)
}
});
} //加载成功后的处理
function loadok(file) {
//计算加载进度
//这里加1,因为输出js文件到页面,也需要时间,加1就是把输出js的时间计为一个文件
//这样所有文件加载完成后是 99% ,输出到页面完成后,才是 100%
var percent = oknum / (files.length + 1) ;
if(typeof(funPercent)=="function") funPercent(percent, file); //加载完成后,按传的顺序输出js到页面
if (oknum == files.length) {
for (var i = 0; i < files.length; i++) {
var script = document.createElement('script');
script.innerHTML = fileData[files[i]];
document.getElementsByTagName('HEAD').item(0).appendChild(script);
}
if(typeof(funPercent)=="function") funPercent(1, "all"); //输出完成即认为加载完成
if(typeof(funOk)=="function") funOk(); //回调完成事件
}
}
}

使用示例:

var files = [
'laz_word/controllers/word_set_ctrl.js?ver=31',
'laz_word/controllers/word_set_ctrl.js?ver=31',
];
ajaxLoadJs(files,function(){
console.log("====over======");
},function(percent,file){
console.log(percent,file);
});

来源:jsfun.cn
http://www.jsfun.cn/#ajaxLoadJs

  

  

js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面的更多相关文章

  1. 利用ajax获取到的网页源码不能执行js代码

    今天觉得我的博客中加载腾讯微博的速度很慢,所以就想改写为js,本来以为直接新建一个页面,把获取函数移到新的页面中,原来的页面只要使用xmlhttp去GET一下,然后把div的innerhtml属性等于 ...

  2. 利用PreLoader实现一个平视显示(HUD)效果(可以运用到加载等待效果),并进行简单的讲解

    什么是PreLoader? PreLoader是由Volodymyr Kurbatov设计的一个很有意思的HUD(平视显示效果(Head Up Display)),通过运动污点和固定污点之间的粘黏动画 ...

  3. thinkPHP利用ajax异步上传图片并显示、删除

    近来学习tp5的过程中,项目中有个发帖功能,选择主题图片.如下: 利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题.使用ajax技术,实现选择性删除所选图 ...

  4. 利用ajax异步校验验证码(转)

    利用ajax异步校验验证码 示例结果如图所示 具体步骤如下: step1: jsp页面及js脚本 <%@page pageEncoding="utf-8" contentTy ...

  5. 原生JS实现AJAX、JSONP及DOM加载完成事件,并提供对应方法

    JS原生AJAX ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRequest 对象: ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...

  6. 原生JS实现AJAX、JSONP及DOM加载完成事件

    一.JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...

  7. js图片未加载完显示loading效果

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  8. JS通过ajax + 多列布局 + 自动加载来实现瀑布流效果

    Ajax 说明:本文效果是无限加载的,意思就是你一直滚动就会一直加载图片出现,通过鼠标滚动距离来判断的,所以不是说的那种加载一次就停了的那种,那种demo下次我会再做一次 css部分用的是html5+ ...

  9. js解决img标签加载失败显示默认图片

    问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加 ...

随机推荐

  1. 集智robot微信公众号开发笔记

    开发流程 公众号基本配置(首先得有公众平台账号) 在开发菜单的基本配置中填写好基本配置项 首先配置服务器地址.Token.和消息加密密钥(地址为开发者为微信验证留的接口.token可以随便填写,只要在 ...

  2. C++ 排列最优解算法思想

    枚举全排列 #include <iostream> #include <cstring> #include <string> using namespace std ...

  3. idea中使用svn,忽略本地修改的指定的文件

    1.打开version control 2.可以查看目前忽略的文件 3.配置要忽略的文件 4.可以用通配符忽略匹配的文件 还有第二种方法,那就是: 在svn提交的界面,如果是没有加入到version- ...

  4. jdk的server模式修改无效(关于client和server模式)

    本机为64位操作系统,64位jdk,win10. 修改C:\Program Files\Java\jre8\lib\amd64\jvm.cfg无效. 我的文件的内容为: 原因参考如下: http:// ...

  5. JQuery Layer的应用实例

    参考以上链接:https://blog.csdn.net/zlj_blog/article/details/24994799 sql面试题:https://www.cnblogs.com/qixuej ...

  6. LinkedHashMap就这么简单【源码剖析】

    前言 声明,本文用得是jdk1.8 前面已经讲了Collection的总览和剖析List集合以及散列表.Map集合.红黑树还有HashMap基础了: Collection总览 List集合就这么简单[ ...

  7. jacascript 原生选项卡插件

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 在布局的时候,想到了很多以前看到过的案例,再次熟悉一下: a链接之间的竖线:可以用a链接的border-r ...

  8. Thinkphp框架下连接两个及以上的数据库方法

    在我们的实际开发者,我们经常需要链接两个以上的数据库,方法跟简单 Thinkphp文档中也有介绍:点击查看 方法如下: 第一步:配置文件config.php <?php //默认数据库1 ret ...

  9. [ABP]浅谈模块系统与 ABP 框架初始化

    在 ABP 框架当中所有库以及项目都是以模块的形式存在,所有模块都是继承自AbpModule 这个抽象基类,每个模块都拥有四个生命周期.分别是: PreInitialze(); Initialize( ...

  10. HTML5 AJAX跨域请求

    HTML5新的标准中,增加了" Cross-Origin Resource Sharing"特性,这个特性的出现使得跨域通信只需通过配置http协议头来即可解决. Cross-Or ...