`

动态加载js,css

 
阅读更多
/*Javascript 动态加载*/
var JsLoader={};
//预计加载个数
JsLoader.LoadCount=0;
//已经加载个数
JsLoader.LoaderNumber=0;
JsLoader.Load=function(js,id,callback)
{
    var scriptId = document.getElementById(id);
    if (scriptId)
    {
        if (callback)
                callback();
        JsLoader.LoaderNumber+=1;
        //加载个数大于或等于预计加载个数,则触发加载完毕事件
        if (JsLoader.LoaderNumber >= JsLoader.LoadCount)
            if (JsLoader.OnLoad)
                JsLoader.OnLoad();
    }
    else
    {
        var script = document.createElement("script");
        script.id = id;
        script.type = "text/javascript";
        
        script.onload = script.onreadystatechange = function()
        {
            if (script.readyState && script.readyState != 'loaded' && script.readyState != 'complete')
            {
                return;
            }
            script.onreadystatechange = script.onload = null;
            //当前文件加载完毕,触发回调事件
            if (callback)
                callback();
            JsLoader.LoaderNumber+=1;
            //加载个数大于或等于预计加载个数,则触发加载完毕事件
            if (JsLoader.LoaderNumber >= JsLoader.LoadCount)
                if (JsLoader.OnLoad)
                    JsLoader.OnLoad();
        };
        script.src = js;
        var head = document.getElementsByTagName('head').item(0);
        head.appendChild (script);
    }
}

/*Css 动态加载*/
var CssLoader={};
//预计加载个数
CssLoader.LoadCount=0;
//已经加载个数
CssLoader.LoaderNumber=0;
CssLoader.Load=function(css,id,callback)
{
    var cssId = document.getElementById(id);
    if (cssId)
    {
        if (callback)
            callback();
        CssLoader.LoaderNumber+=1;
        //加载个数大于或等于预计加载个数,则触发加载完毕事件
        if (CssLoader.LoaderNumber >= CssLoader.LoadCount)
            if (CssLoader.OnLoad)
                CssLoader.OnLoad();
    }
    else
    {
        var link = document.createElement("link");
        link.id = id;
        link.rel="stylesheet";
        link.type = "text/css";
        
        link.onload = link.onreadystatechange = function()
        {
            if (link.readyState && link.readyState != 'loaded' && link.readyState != 'complete')
            {
                return;
            }
            link.onreadystatechange = link.onload = null;
            //当前文件加载完毕,触发回调事件
            if (callback)
                callback();
            CssLoader.LoaderNumber+=1;
            //加载个数大于或等于预计加载个数,则触发加载完毕事件
            if (CssLoader.LoaderNumber >= CssLoader.LoadCount)
                if (CssLoader.OnLoad)
                    CssLoader.OnLoad();
        };
        link.src = css;
        var head = document.getElementsByTagName('head').item(0);
        head.appendChild (link);
    }
}
分享到:
评论

相关推荐

    jQury.动态加载css和js文件

    // JavaScript Document ;(function($){ $.extend({  includePath: '',  include: function(file) {  var files = typeof file == "string" ? [file]:file;  for (var i = 0; i ; i++) {  var name = files[i]...

    js 异步加载js, css文件

    当项目js(css)文件使用越来越多,js 文件的加载也成了性能上的一个问题,此资源能够在页面全部加载完成后异步加载js等资源文件,它可以顺序加载资源列表,也可以并发加载资源列表,它包含一个方法调用接口:...

    动态加载js、css等文件跨iframe实现

    1、动态加载js,css文件(用原生js和jquery) iframe结构: frame0(父) frame2(子) frame3(子) frame2中触发事件,动态的向frame3中 加载js、css文件和 dom元素? *同级之间可以调用,可以 通过 子-父-子 的方式...

    javascript、css动态加载工具

    javascript、css动态加载工具

    使用javaScript动态加载Js文件和Css文件

    (1)使用JavaScript动态加载Js文件 /*JavaScript动态加载Js文件*/ var scriptNode = document.createElement('script'); scriptNode.src = 'proxy.js?t='+new Date().getTime();/*附带时间参数,防止缓存*/ ...

    动态加载JS文件和CSS文件,多浏览器支持。

    动态加载JS文件和CSS文件,多浏览器支持。多个JS文件同时加载,加载完成后执行回调方法。 使用方法: var loader=new RemoteLoader(); loader.loadFiles(["yy.js","jj.jus"],作用域);

    动态加载外部CSS与JS文件

    动态加载外部CSS与JS文件使用dom创建[removed]或者<link>标签,并给他们附加属性,如type等。然后使用appendChild方法把标签绑定到另一个标签,一般是绑到<head>。  应用:  1、提高代码的复用,减少...

    28个纯css3 加载loading动画特效

    今天特意给大家推荐一款css3 loading加载效果 当然,他并不是纯css3的,抱歉标题可能会有些歧义,但是偶尔的一点点js也是可以忽略的啦 附件提供了28个不同的加载效果,你可以任选一种作为你的手机网页端...

    html延迟加载JS和CSS

    html延迟加载JS和CSS 支持ie6和ie6以上任何浏览器

    javascript实现动态加载CSS.docx

    javascript实现动态加载CSS.docx

    loading页面加载图标css3代码.zip

    loading页面加载图标css3代码里面包含9款不同效果的css3加载动画特效。

    JS 动态加载js文件和css文件 同步/异步的两种简单方式

    下面小编就为大家带来一篇JS 动态加载js文件和css文件 同步/异步的两种简单方式。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    webview 加载js ,css

    1.android webview通过调用js,传递数据,显示在html 上 2.这样的做法会让我们的页面效果更绚丽,显示更随心所欲!

    统一加载css与js

    前一段时间公司要求为了方便代码管理与整洁降低多余代码下达了一个需求:那就是统一加载css与js,可直接运行

    动态加载js和css(外部文件)

    本文详细介绍下,如何动态加载外部js文件及js;动态加载外部css样式及css样式,感兴趣的朋友可以参考下哈,希望对你学习js有所帮助

    html页面动态加载,删除,替换 js/css引用

    html页面动态加载,删除,替换 js/css引用

    使用jquery动态加载Js文件和Css文件

    Jquery动态加载Js和Css扩展方法 $.extend({ includePath: '', include: function(file) { var files = typeof file == "string" ? [file]:file; for (var i = 0; i < files.length; i++) { var name = ...

    javascript 动态加载 css 方法总结

    有时候我们在设计网页的时候想动态的加载css文件,并不是将css文件写死在页面中,这时就可以使用下面方法.

Global site tag (gtag.js) - Google Analytics