JavaScript 脚本无阻塞下载系统

网站打开的速度永远是web设计考虑最大的一个因素，后台程序虽然重要，前台的页面加载速度也不容忽视，JS脚本让人又爱又恨，不能不用，却又因为阻塞式的下载，造成有些时候页面迟迟打不开，今天我带来的这个插件就是解决js脚本加载的。经调试无错，兼任IE 火狐 Android手机等浏览器，脚本见附件，注：部分代码参考网上

JS无阻塞加载

/*
 +----------------------------------------------------------------------
 | JavaScript 脚本无阻塞下载系统
 +----------------------------------------------------------------------
 | Copyright (c) 2013 http://www.guangletuan.com All rights reserved.
 +----------------------------------------------------------------------
 | Author: Scaler(1615731823@qq.com)
 +----------------------------------------------------------------------

使用说明

<script type="text/asynjs" order="1" asynsrc="js1.js"></script>
<script type="text/asynjs" order="2" asynsrc="js2.js"></script>

参数说明：
type：     text/asynjs 异步获取标志，用于查找要异步加载的脚本
order：      加载顺序，数字越小，加载越早，数字不要重复，不要跳数
asynsrc：要异步加载的脚本的路径
*/

+(function() {
    //判断是否原始浏览器是否存在indexOf方法
    var oldArrayIndexOf = Array.indexOf;
    Array.prototype.indexOf = function(obj) {
        if (!oldArrayIndexOf) {
            for (var i = 0, imax = this.length; i < imax; i++) {
                if (this[i] === obj) {
                    return i;
                }
            }
            return -1;
        } else {
            return oldArrayIndexOf(obj);
        }
    };
    
    var document = window.document;
    var getAttribute = function(elem, name) {
        var attrs = elem.attributes;
        var len = attrs.length;
        for (var i = 0; i < len; i++) {
            var attr = attrs[i];
            if (name === attr.nodeName) {
                return attr.nodeValue;
            }
        }
        return undefined;
    };

    var scriptsData;
    var orders = [];
    var wdata = [];

    var findScripts = function() {
        var aScripts = document.getElementsByTagName('script');
        var len = aScripts.length;
        var scriptsArr = [];
        var scriptsSrc = [];

        for (var i = 0; i < len; i++) {
            var script = aScripts[i];
            if ("text/asynjs" === getAttribute(script, "type") && "undefined" === typeof(script.founded)) {
                script.founded = true;
                var order = getAttribute(script, "order") || getAttribute(script, "data-order") || 0;
                script.order = order;
                if (orders.length==0 || orders.indexOf(order) < 0) {
                    orders.push(order);
                }
                var src = getAttribute(script, "asynsrc") || getAttribute(script, "data-asynsrc");
                script.src = src;
                if (src && (scriptsSrc.length==0 || scriptsSrc.indexOf(src) < 0)) {
                    scriptsArr.push(script);
                }
            }
        }
        orders.sort(function compare(a, b) {
            return a - b;
        });
        return scriptsData = scriptsArr;
    };
    var downloadScripts = function(scriptArr) {
        var scripts = scriptArr || findScripts();
        return;
        var len = scripts.length;

        for (var i = 0; i < len; i++) {
            var img = new Image();
            img.src = scripts[i].src;
            img.style.display = "none";
        }
    };

    var processScripts = function(scriptArr) {
        var scripts = (scriptArr && scriptArr.constructor === Array) ? scriptArr: scriptsData;
        var failscripts = [];
        
        for (var i =orders.length-1; i>=0; i--) {
            var order = orders[i];
            var len = scripts.length;
            var fns = [];
            var url="";

            for (var j = 0 ; j < len; j++) {
                var script = scripts[j];
                if (script.order == order) {
                    url=script.src;
                }
            }

            if (i == orders.length-1) {
                wdata[order] = processScript(url)
            } else {
                
                var nextorder = orders[i+1];
                wdata[order] = processScript(url, wdata[nextorder]);
            }
        }
        var exorder = orders[0];
        wdata[exorder]();
    };
    var scripting=null;
    var processScript = function(url, fn) {
        return function() {
            if(document.attachEvent && scripting!=null)
            {
                if(scripting.readyState=="loaded" || scripting.readyState=="complete")
                {/* 成功加载 */}
                else
                {
                    //alert(scripting.readyState);
                    return;
                }
            }
            var se = document.createElement('script');
            scripting=se;
            if (fn) {
                if(document.attachEvent)
                    se.onreadystatechange = fn;
                else
                    se.onload = fn;
            }
            se.src = url;
            var s1 = document.getElementsByTagName('script')[0];
            s1.parentNode.insertBefore(se, s1);
        }
    }

    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", function() { downloadScripts(); }, false);
        window.addEventListener("load", function() { setTimeout(processScripts, 0); }, false);
    }
    else if (document.attachEvent) {
        document.attachEvent("onreadystatechange", function() { downloadScripts(); });
        window.attachEvent("onload", function() { setTimeout(processScripts, 0); });
    }
})();

欢迎大家提意见。。。

 附件：asyLoad.js

 

转载于:https://www.cnblogs.com/chinaScaler/articles/asyLoad.html