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. wpf的tab移动焦点只能在容器内部使用

    设置 KeyboardNavigation.TabNavigation="Cycle" 即可

  2. CSS Box Model 盒子模型

    1. 介绍 1.1 什么是 Box Model 在HTML中的每个element(元素)都可以看作一个矩形的盒子,矩形从内到外依次由元素的内容(content).内边距(padding).边框(bor ...

  3. else语句的搭配

    1.else语句搭配if 要么怎样,要么怎样 2.else语句搭配for和while 干完循环之后执行else,干不完或者break就不执行 3.else与异常处理 没有问题的话就执行else吧

  4. cookielib和urllib2模块结合模拟网站登录

    1.cookielib模块 cookielib模块的主要作用就是提供可存储cookie的对象,以便于与urllib2模块配合使用来访问internet资源,例如可以利用本模块的cookiejar类的对 ...

  5. Maven 本地仓库明明有jar包,pom文件还是报错解决办法

    方法一: 找到出错的jar包文件位置,删掉_maven.repositories文件 方法二: maven中的本地仓库的index索引没有更新导致 解决方案: 在eclipse中打开菜单 window ...

  6. 使用开源数据库客户端DBeaver连接DB2数据库

    下载安装 首先进入 官网 选择对应的版本进行安装. 下载下来后,一直惦记next即可完成安装(期间包括选择文件安装路径等操作,可按需修改). 连接db2 打开DBeaver,新建连接-->DBe ...

  7. 创建类似于Oracle中SYS_GUID() 的方法

    CREATE or REPLACE FUNCTION "sys_guid"()RETURNS "pg_catalog"."varchar" ...

  8. [LeetCode] Construct String from Binary Tree 根据二叉树创建字符串

    You need to construct a string consists of parenthesis and integers from a binary tree with the preo ...

  9. Mlecms 反射型xss && 后台任意文件下载

    应该算0day吧,自己分析出来的,有点鸡肋,不过小cms分析确实比较简单. xss地址:search.php?word=a><img+src=1+onerror=alert`1`>a ...

  10. [SCOI2016]背单词

    题目描述 Lweb 面对如山的英语单词,陷入了深深的沉思,”我怎么样才能快点学完,然后去玩三国杀呢?“.这时候睿智的凤老师从远处飘来,他送给了 Lweb 一本计划册和一大缸泡椒,他的计划册是长这样的: ...