js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面
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的顺序先后加载到页面的更多相关文章
- 利用ajax获取到的网页源码不能执行js代码
今天觉得我的博客中加载腾讯微博的速度很慢,所以就想改写为js,本来以为直接新建一个页面,把获取函数移到新的页面中,原来的页面只要使用xmlhttp去GET一下,然后把div的innerhtml属性等于 ...
- 利用PreLoader实现一个平视显示(HUD)效果(可以运用到加载等待效果),并进行简单的讲解
什么是PreLoader? PreLoader是由Volodymyr Kurbatov设计的一个很有意思的HUD(平视显示效果(Head Up Display)),通过运动污点和固定污点之间的粘黏动画 ...
- thinkPHP利用ajax异步上传图片并显示、删除
近来学习tp5的过程中,项目中有个发帖功能,选择主题图片.如下: 利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题.使用ajax技术,实现选择性删除所选图 ...
- 利用ajax异步校验验证码(转)
利用ajax异步校验验证码 示例结果如图所示 具体步骤如下: step1: jsp页面及js脚本 <%@page pageEncoding="utf-8" contentTy ...
- 原生JS实现AJAX、JSONP及DOM加载完成事件,并提供对应方法
JS原生AJAX ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRequest 对象: ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...
- 原生JS实现AJAX、JSONP及DOM加载完成事件
一.JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...
- js图片未加载完显示loading效果
<html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...
- JS通过ajax + 多列布局 + 自动加载来实现瀑布流效果
Ajax 说明:本文效果是无限加载的,意思就是你一直滚动就会一直加载图片出现,通过鼠标滚动距离来判断的,所以不是说的那种加载一次就停了的那种,那种demo下次我会再做一次 css部分用的是html5+ ...
- js解决img标签加载失败显示默认图片
问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加 ...
随机推荐
- asp.net core 二 Nginx Supervisor 负载,监听
ASP.NET Core负载均衡集群搭建(CentOS7+Nginx+Supervisor+Kestrel) asp.net core在linux运行下,一但命令行退出 ...
- 使用vue-cli快速搭建大型单页面应用开发环境
工作环境:terminal,已经全局安装了vue(可使用npm install -g vue) 全局安装vue-cli npm install -g vue-cli 创建一个基于webpack模板的项 ...
- Win10 VS2012 无法注册IIS4.0 解决方案
死活注册不上,度娘也找了,最终找到只要打个补丁就行. 安装: Microsoft Visual Studio 2012 更新 (KB3002339) 下载:http://www.microsoft.c ...
- RPO(Relative Path Overwrite)
Conception(Relative vs Absolute) Abosolute Path: "/etc/hosts"(in Linux), "C:\Windows\ ...
- [LeetCode] K-diff Pairs in an Array 数组中差为K的数对
Given an array of integers and an integer k, you need to find the number of unique k-diff pairs in t ...
- javascript的基础(2)--数据类型介绍
1. number数据类型 所有的数字都是Number数据类型 利用typeof运算符可以返回当前数据的数据类型 特殊值:NaN not a number 不是一个数字 注意 :小数的计算可能产生丢失 ...
- [HNOI 2013]游走
Description 题库链接 一个无向连通图,顶点从 \(1\) 编号到 \(N\) ,边从 \(1\) 编号到 \(M\) . 小Z在该图上进行随机游走,初始时小Z在 \(1\) 号顶点,每一步 ...
- [HNOI2015]接水果
题目描述 风见幽香非常喜欢玩一个叫做 osu!的游戏,其中她最喜欢玩的模式就是接水果.由于她已经DT FC 了The big black, 她觉得这个游戏太简单了,于是发明了一个更加难的版本. 首先有 ...
- [HNOI2003]消防局的设立
题目描述 2020年,人类在火星上建立了一个庞大的基地群,总共有n个基地.起初为了节约材料,人类只修建了n-1条道路来连接这些基地,并且每两个基地都能够通过道路到达,所以所有的基地形成了一个巨大的树状 ...
- ●Joyoi Dotp 驱逐猪猡
题链: http://www.joyoi.cn/problem/tyvj-2610题解: 期望dp,高斯消元 对于每一种到达i点的方案,都存在一个概率p, 令dp[i]表示到达i点的期望次数,那么容易 ...