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中加 ...
随机推荐
- [LuoguP1113] 杂物 - 拓扑排序
其实只是纪念下第一篇洛谷题解? Description John的农场在给奶牛挤奶前有很多杂务要完成,每一项杂务都需要一定的时间来完成它.比如:他们要将奶牛集合起来,将他们赶进牛棚,为奶牛清洗乳房以及 ...
- 关于vertical-align和line-height的真知灼见
本文的重点是了解vertical-align和line-height的使用 涉及到的名词:基线,底端,行内框,行框,行间距,替换元素及非替换元素,对齐.只有充分理解这些概念才会灵活运用这两个属性. 什 ...
- 基于 MySQL 的数据库实践(基本查询)
首先根据准备工作中的操作导入大学模式,打开数据库连接后进入到 MySQL 的交互界面,再使用命令 use db-book; 切换到 db-book 数据库. 单关系查询 SQL 查询的基本结构由三个子 ...
- drupal8的安装
一.首先安装好linux系统虚拟机 1.在drupal官网上下载drupal包,https://www.drupal.org/download 我下载的是 https://ftp.drupal.org ...
- [LeetCode] Find Bottom Left Tree Value 寻找最左下树结点的值
Given a binary tree, find the leftmost value in the last row of the tree. Example 1: Input: 2 / \ 1 ...
- enumerate给列表加序号
#coding=utf-8#给列表加上序号,enumerate(l1),默认从0开始l1=['money','house','joo']for item in enumerate(l1,1): #pr ...
- openSUSE设置局域网的时间同步
- Python获取会议部分的信息内容(不断完善中)
这是一个用于获取物理师会议报告的简单爬虫,数据库表结构正在不断完善中 爬虫信息: # -*- coding:utf-8 -*- import urllib.request import pymysql ...
- [NOI 2005]聪聪和可可
Description 题库链接 一只猫和一只老鼠在一张 \(n\) 个节点和 \(m\) 条边的无向图上,初始位置不同.对于每一时刻,猫会先走,它走的方向为靠近老鼠的方向:若多个节点可选,则选字典序 ...
- 【BZOJ1060】【ZJOI2007】时态同步
Description 小Q在电子工艺实习课上学习焊接电路板.一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数字1,2,3-.进行标号.电路板的各个节点由若干不相交的导线相连接,且对于电路板 ...