动态加载css方法实现和深入解析

来源:互联网 发布:如何抢注域名赚钱 编辑:程序博客网 时间:2024/06/07 05:21
    一、方法引用来源和应用
    此动态加载css方法 loadCss,剥离自Sea.js,并做了进一步的优化(优化代码后续会进行分析)。
    因为公司项目需要用到懒加载来提高网站加载速度,所以将非首屏渲染必需的css文件进行动态加载操作。
    二、优化后的完整代码
    /*
    * @function 动态加载css文件
    * @param {string} options.url -- css资源路径
    * @param {function} options.callback -- 加载后回调函数
    * @param {string} options.id -- link标签id
    */  北京做卧蚕哪家医院好http://www.010yestar.com/
    function loadCss(options){
    var url = options.url,
    callback = typeof options.callback == "function" ? options.callback : function(){},
    id = options.id,
    node = document.createElement("link"),
    supportOnload = "onload" in node,
    isOldWebKit = +navigator.userAgent.replace(/.*(?:AppleWebKit|AndroidWebKit)\/?(\d+).*/i, "$1") < 536, // webkit旧内核做特殊处理
    protectNum = 300000; // 阈值10分钟,一秒钟执行pollCss 500次
    node.rel = "stylesheet";
    node.type = "text/css";
    node.href = url;
    if( typeof id !== "undefined" ){
    node.id = id;
    }
    document.getElementsByTagName("head")[0].appendChild(node);
    // for Old WebKit and Old Firefox
    if (isOldWebKit || !supportOnload) {
    // Begin after node insertion
    setTimeout(function() {
    pollCss(node, callback, 0);
    }, 1);
    return;
    }
    if(supportOnload){
    node.onload = onload;
    node.onerror = function() {
    // 加载失败(404)
    onload();
    }
    }else{
    node.onreadystatechange = function() {
    if (/loaded|complete/.test(node.readyState)) {
    onload();
    }
    }
    }
    function onload() {
    // 确保只跑一次下载操作
    node.onload = node.onerror = node.onreadystatechange = null;
    // 清空node引用,在低版本IE,不清除会造成内存泄露
    node = null;