zoukankan      html  css  js  c++  java
  • 按顺序动态加载js, 可控版本, 有回调

    load和onScriptLoad方法是直接从layerui的源码里粘贴出来修改了一下用的, 来源: https://gitee.com/sentsin/layui/blob/master/src/layui.js  

    var version = 1;
    
    function jsloader(arr, cb) {
        var head = document.getElementsByTagName('head')[0];
    
        var _load_index = 0;
    
        function onScriptLoad(node, e, url) {
            var readyRegExp = navigator.platform === 'PLaySTATION 3' ? /^complete$/ : /^(complete|loaded)$/
            if (e.type === 'load' || (readyRegExp.test((e.currentTarget || e.srcElement).readyState))) {
                head.removeChild(node);
                onCallback();
            }
        }
    
        function onCallback() {
            _load_index++;
            if (_load_index == arr.length) {
                cb();
            } else {
                load(arr[_load_index]);
            }
        }
    
        var isOpera = typeof opera !== 'undefined' && opera.toString() === '[object Opera]';
    
        function load(url) {
            var node = document.createElement('script');
    
            node.async = true;
            node.charset = 'utf-8';
            node.src = url + '?v=' + version;
    
            head.appendChild(node);
            if (node.attachEvent && !(node.attachEvent.toString && node.attachEvent.toString().indexOf('[native code') < 0) && !isOpera) {
                node.attachEvent('onreadystatechange', function (e) {
                    onScriptLoad(node, e, url);
                });
            } else {
                node.addEventListener('load', function (e) {
                    onScriptLoad(node, e, url);
                }, false);
            }
        }
    
        load(arr[_load_index]);
    }

    使用方法:

    //使用方式
    jsloader(["js/1.js", "js/2.js", "js/3.js"], function () {
    console.log('all complete'); });

    1/2/3.js内容

    //1.js
    var a = 1;
    console.log(1);
    
    //2.js
    var b = 1;
    console.log('a:' + a + ' / ' + 2);
    
    
    //3.js
    var c = 1;
    console.log('a:' + a + ' / ' + 'b:' + b + ' / ' + 3);

    效果:

  • 相关阅读:
    python学习第18天----属性、类方法、静态方法
    面试总结
    JAVA面试题整理
    Docker-基础
    Shell
    MYSQL
    logstash的使用(ELK)
    (ELK)FileBeat的使用
    Zookeeper的介绍和单机、集群搭建
    Elaticsearch7.7.0的安装(ELK)
  • 原文地址:https://www.cnblogs.com/adinet/p/10312912.html
Copyright © 2011-2022 走看看