zoukankan      html  css  js  c++  java
  • 异步加载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);

     
     
  • 相关阅读:
    个人博客作业-软件案例分析1 博客园和CSDN
    第一次结对项目
    个人项目作业(1)
    个人博客作业(1)
    第一次个人作业
    面向对象第四单元总结和期末总结
    面向对象第三单元总结
    面向对象第二单元总结
    UML——BUAA_OO 第四单元总结 & 课程总结
    JML——BUAA_OO 第三单元总结
  • 原文地址:https://www.cnblogs.com/dwfbenben/p/2591959.html
Copyright © 2011-2022 走看看