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. 丢掉DDL,我用这招3分钟清空 MySQL 9亿记录数据表

    摘要:最近由于福建开机广告生产环境的广告日志备份表主键(int类型)达到上限(21亿多),不能再写入数据,需要重新清空下该表并将主键重置,但由于表里有8亿多记录的数据量,使用重置命令及DDL命令执行地 ...

  2. python CSS

    CSS 一. css的四种引入方式   1.行内式  2.嵌入式  3. 链接式 将一个.css文件引入到HTML文件中 1 <link href="mystyle.css" ...

  3. flask +gevent+nginx+Gunicorn+supervisor部署flask应用

    上篇   可以完美部署flask ,但是视乎在结合gevent+apscheduler 实现异步非阻塞后台和定时任务的时候视乎不是那么完美.请教了前辈,决定使用flask+gevent+nginx+g ...

  4. Codeforces Round #441 (Div. 2, by Moscow Team Olympiad) A. Trip For Meal

    http://codeforces.com/contest/876/problem/A 题意: 一个人一天要吃n次蜂蜜,他有3个朋友,他第一次总是在一个固定的朋友家吃蜂蜜,如果说没有吃到n次,那么他就 ...

  5. POJ-1135 Domino Effect---最短路Dijk

    题目链接: https://vjudge.net/problem/POJ-1135 题目大意: 有N个关键的多米诺骨牌,这些牌通过一些路径相连接,这些路径是由一排其他骨牌构成的.已知每一条路径上的骨牌 ...

  6. canvas图像模糊以及图像变形问题

    问题:有时用canvas作图时发现图像会出现模糊不清晰的问题,甚至做出来的图呈现出的效果与我们给的数值所应该呈现出的效果不一致 原因:当你在支持html5 canvas的浏览器下查看页面的时候,can ...

  7. JavaScript 字典(Dictionary)

    TypeScript方式实现源码 //  set(key,value):向字典中添加新元素. //  remove(key):通过使用键值来从字典中移除键值对应的数据值. //  has(key ...

  8. [LeetCode] My Calendar III 我的日历之三

    Implement a MyCalendarThree class to store your events. A new event can always be added. Your class ...

  9. [LeetCode] Add Bold Tag in String 字符串中增添加粗标签

    Given a string s and a list of strings dict, you need to add a closed pair of bold tag <b> and ...

  10. Java入门之JDK的安装和环境变量的配置

    Java的版本 1. Java SEjava se 以前称为J2SE.它允许开发和部署在桌面.服务器.嵌入式环境和实时环境中使用的 Java 应用程序.Java SE是基础包,但是也包含了支持 Jav ...