异步加载js文件并执行js方法：实现异步处理网页的复杂效果

有这么一个场景，当你的网页页面效果过多就会造成了打开页面的速度变得缓慢，长时间处于加载的状态，这样的效果通常会让用户感到不友好，通常的处理方法是先加载基本的html，然后再加载其他的网页效果，让用户感觉到页面一下子就出来了，然后其他的网页效果再慢慢的展现出来。这里通过JSLoader组件来实现这种前端的效果

var JSLoader = function(){

var scripts = {}; // scripts['a.js'] = {loaded:false,funs:[]}

function getScript(url){

var script = scripts[url];

if (!script){

script = {loaded:false, funs:[]};

scripts[url] = script;

add(script, url);

}

return script;

}

function run(script){

var funs = script.funs,

len = funs.length,

i = 0;

for (; i<len; i++){

var fun = funs.pop();

fun();

}

function add(script, url){

var scriptdom = document.createElement('script');

scriptdom.type = 'text/javascript';

scriptdom.loaded = false;

scriptdom.src = url;

scriptdom.onload = function(){

scriptdom.loaded = true;

run(script);

scriptdom.onload = scriptdom.onreadystatechange = null;

};

//for ie

scriptdom.onreadystatechange = function(){

if ((scriptdom.readyState === 'loaded' || scriptdom.readyState === 'complete') && !scriptdom.loaded){

run(script); '

scriptdom.onload = scriptdom.onreadystatechange = null;

}

};

document.getElementsByTagName('head')[0].appendChild(scriptdom);

}

return {

load: function(url){

var arg = arguments,

len = arg.length,

i = 1,

script = getScript(url),

loaded = script.loaded;

for (; i<len; i++){

var fun = arg[i];

if (typeof fun === 'function'){

if (loaded) {

fun();

}else{

script.funs.push(fun);

}

};

}();

调用方法示例：先在页面上加载JSLoader.js文件

然后执行 JSLoader.load('js/test.js' , function () {a();})

表示异步加载test.js文件，并且加载完成后再执行a()方法，a()方法是test.js里面的方法，a()方法就是负责渲染一些前端页面的网页效果来的。不过该方法在ie7下并不会产生异步的效果，在ie7下需要使用延时触发器来包装一下，如：

setTimeout(" JSLoader.load('js/test.js' , function () {a();})", 1);

异步加载js文件并执行js方法：实现异步处理网页的复杂效果相关推荐

yepnope.js 异步加载资源文件
yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本,可以在页面上仅加载用户需要的js/css. yepnope的优点: 可以同时处理javascript以及css 能够按条件 ...
yepnope.js – 异步加载资源文件
yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本,可以在页面上仅加载用户需要的js/css. 典型代码示例 yepnope({test : Modernizr.geoloc ...
JS，两种在页面加载完成后自动执行的方法（ready，onload）
JS,两种在页面加载完成后自动执行的方法 1.jQuery的ready事件,需要引入jQuery的包才能使用,表示文档结构已经加载完成(不包含图片等非文字媒体文件): ready可以多次调用,可以绑定 ...
HTML5动态加载资源方式,动态加载JavaScript文件的两种方法
这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval ...
【Android 安全】DEX 加密 ( 代理 Application 开发 | 加载 dex 文件 | 使用反射获取方法创建本应用的 dexElements | 各版本创建 dex 数组源码对比 )
文章目录一.不同 Android 系统创建 dex 数组源码对比二.不同 Android 系统创建 dex 数组源码对比三. Android 5.1 及以下系统反射方法并创建 Element[] ...
php动态加载js,动态加载script文件的两种方法_javascript技巧
动态加载script到页面大约有俩方法第一种就是利用ajax方式,把script文件代码从后台加载到前台,然后对加载到的内容通过eval()执行代码.第二种是,动态创建一个script标签,设置其s ...
页面加载完后立刻执行JS的两种方法
方式一:window.onload: 当一个文档完全下载到浏览器中时,才会触发window.onload事件.这意味着页面上的全部元素对js而言都是可以操作的,也就是说页面上的所有元素加载完毕才会执行 ...
java动态加载jar文件并执行方法
在项目开发的过程中,有时候需要动态灵活的加载某个jar包并执行里面的方法的时候,我们可以使用本篇文章写得方式去动态的加载jar包而不用使用原始方式引入jar包作为lib去使用,接下来介绍如何动态加载j ...
iframe异步加载_5种延迟加载图像的方法以帮助你提升网站性能与用户体验
英文 | https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/翻译 | web前端开发(ID: ...

异步加载js文件并执行js方法：实现异步处理网页的复杂效果

异步加载js文件并执行js方法：实现异步处理网页的复杂效果相关推荐

最新文章

热门文章