zoukankan      html  css  js  c++  java
  • javascript,css延迟加载器

    /**
     * js/css LazyLoad
     * 
     * 变量hash记录已经加载过的资源,避免重复加载
     * 
     * Z.loadScript('a.js', function() { ... })
     *
     * Z.loadScript('a.js', option, function() { ... })
     * 
     * 加载多个js后才回调,如果某个js文件没有下载下来则会报错,且不会执行回调函数
     * Z.loadScript(['a.js','b.js','c.js'], function() { ... })
     * 
     * option
     *   charset: 'utf-8'
     *   scope: xx
     * 
     * 加载多个css后才回调,IE6/7/8/9和Opera中支持link的onreadystatechange事件
     * Firefox/Safari/Chrome既不支持onreadystatechange,也不支持onload。使用setTimeout延迟加载
     *
     * Z.loadLink('a.css', function() { ... })
     * 
     */
    
    var Z = {
        error : function(msg) {
            throw new Error(msg)
        },
        ua : window.navigator.userAgent.toLowerCase(),
        ie : /msie/.test(this.ua) && !/opera/.test(this.ua)
    };
    
    (function(Z) {
    
    var doc = window.document;
    var hash = {};
    var types = ['Array', 'Function', 'Object', 'String', 'Number', 'Boolean', 'Date'];
    var nativeForEach = types.forEach;
    var emptyFunc = function () {};
    var head = doc.head || doc.getElementsByTagName('head')[0];
    
    function forEach(obj, iterator, context) {
        if (obj == null) return;
        if (nativeForEach && obj.forEach === nativeForEach) {
            obj.forEach(iterator, context)
        } else if ( obj.length === +obj.length ) {
            for (var i = 0; i < obj.length; i++) {
                if (iterator.call(context||obj[i], obj[i], i, obj) === true) return
            }
        } else {
            for (var k in obj) {
                if (iterator.call(context||obj[k], obj[k], k, obj) === true) return
            }
        }
    }
    
    forEach(types, function(name) {
        Z['is' + name] = function(obj) {
            if (obj === undefined || obj === null) return false;
            return Object.prototype.toString.call(obj) === '[object ' + name + ']'
        }
    });
    
    function createEl(type, attrs) {
        var el = doc.createElement(type), attr;
        for (attr in attrs) {
            el.setAttribute(attr, attrs[attr])
        }
        return el
    }
    function done(list, obj) {
        hash[obj.url] = true;
        list.shift();
        if (!list.length) {
            obj.callback.call(obj.scope)
        }
    }
    function load(type, urls, option, callback) {
    
        if (Z.isString(urls)) {
            urls = [urls]
        }
    
        if (Z.isFunction(option)) {
            callback = option;
            option = {}
        }
    
        option = option || {};
    
        var obj = {
            scope: option.scope || window,
            callback: callback || emptyFunc
        };
        var list = [].concat(urls);
        var charset = option.charset || 'utf-8';
    
        forEach(urls, function(url, i) {
            var el = null;
                
            // 已经加载的不再加载
            if (hash[url]) {
                Z.error('warning: ' + url + ' has loaded.')
            }
    
            if (type === 'js') {
                el = createEl('script', {
                    src: url,
                    async: 'async',
                    charset: charset
                })
            } else {
                el = createEl('link', {
                    href: url,
                    rel: 'stylesheet',
                    type: 'text/css'
                })
            }
    
            (function(url) {
                if (Z.ie) {
                    el.onreadystatechange = function() {
                        var readyState = this.readyState;
                        if(readyState === 'loaded' || readyState === 'complete') {
                            obj.url = url;
                            this.onreadystatechange = null;
                            done(list, obj)
                        }
                    }
                } else {
                    if (type == 'js') {
                        el.onload = function() {
                            obj.url = url;
                            done(list, obj)
                        };
                        el.onerror = function () {
                            Z.error(url + ' 不存在');
                        }
                    } else {
                        setTimeout(function() {
                            obj.url = url;
                            done(list, obj)
                        }, 100)
                    }
                }
            })(url);
            
            if (type === 'js') {
                head.insertBefore(el, head.firstChild)
            } else {
                head.appendChild(el)
            }
        })
    
    }
    
    Z.loadScript = function(urls, option, callback) {
        load('js', urls, option, callback)
    };
    
    Z.loadLink = function(urls, option, callback) {
        load('css', urls, option, callback)
    }
    
    })(Z);
  • 相关阅读:
    linux系统调用之系统控制
    linux系统调用之文件系统操作
    使用EF框架实现MVC的增删改查功能
    MVC+EF快速弄出一个CRUD
    Entity Framework 全面教程详解(转)
    微信小程序学习
    为Bootstrap模态对话框添加拖拽移动功能
    Razor语法大全
    EXCEL怎么打20位以上的数字?
    C# SQLite 数据库操作学习
  • 原文地址:https://www.cnblogs.com/fengyuqing/p/js-css-lazyload.html
Copyright © 2011-2022 走看看