`

动态加载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);
    }
}
分享到:
评论

相关推荐

    动态加载Css 浏览器判断

    在提供的压缩包文件中,`Browes 判断.asp`和`Browes 浏览器判断.asp`可能是用于服务器端进行浏览器检测的ASP文件,而`CheckBr(动态加载Css).js`可能是用于客户端JavaScript动态加载CSS并进行浏览器判断的脚本。...

    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、css等文件跨iframe实现

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

    js 异步加载js, css文件

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

    webview 加载js ,css

    下面我们将深入探讨如何在Android的WebView中加载和使用JS、CSS以及它们带来的优势。 1. Android WebView加载HTML Android的WebView可以通过调用`loadData()`或`loadDataWithBaseURL()`方法加载HTML字符串,或者...

    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 动态加载js文件和css文件 同步/异步的两种简单方式

    动态加载js文件可以通过创建一个script元素,并将其src属性设置为需要加载的js文件的路径。示例代码如下: ```javascript function loadJsFile(url,FileType,successCallback){ var script = document....

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

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

    html延迟加载JS和CSS

    在给定的文件`lazyLoadJC.js`中,可能实现了一个JavaScript库,用于延迟加载JS和CSS资源。这个库可能包含以下功能: 1. 检测浏览器兼容性,确保在IE6及更高版本上运行。 2. 针对JavaScript的延迟加载,可能使用了`...

    javascript实现动态加载CSS.docx

    (加载JS部分) } else if (type == "css") { var ls = document.getElementsByTagName("link"); for (i = 0; i ; i++) { if (ls[i].href === path || ls[i].title === title) return ls[i]; } s = document....

    flex动态加载css实例

    动态加载CSS的方法主要有两种:使用`<link>`标签的`rel="preload"`属性和使用JavaScript动态创建`<link>`标签。 1. 使用`<link rel="preload">`: 这是一种HTML5的预加载特性,可以提前加载关键资源,如CSS。在`...

    延迟加载JS/CSS

    延迟加载(Lazy Load)是一种...7. **总结**:延迟加载JS和CSS是现代Web开发中的重要优化手段,它通过按需加载策略,平衡了用户体验、性能和资源消耗。理解并掌握这种技术,对于创建高性能、响应迅速的网站至关重要。

    动态加载外部CSS与JS文件

    动态加载外部CSS与JS文件是一种优化网页性能的技术,它允许我们在网页加载时按需加载资源,从而提升用户体验。这种技术通常用于大型应用或响应式设计,以减少初始页面加载时间,尤其是在用户网络环境不佳时。 首先...

    动态添加css或js链接

    在Web开发过程中,我们经常会遇到需要动态加载样式表(CSS)或脚本(JavaScript)的情况。这种方式不仅能够提高页面的加载速度,还可以实现更加灵活的功能。本文将详细介绍如何在ASP.NET Web Forms中动态添加CSS或JS...

    实用的loading数据加载 js+css

    本资源提供了一种实用的js(JavaScript)与css(Cascading Style Sheets)结合实现的加载动画,旨在提升用户体验,减少用户等待时的不耐烦感。下面将详细介绍如何利用JavaScript和CSS来创建一个美观且实用的加载效果...

    javascript 动态加载 css 方法总结

    以下总结了一些JavaScript实现动态加载CSS文件的方法。 ### 使用@import加载外部CSS文件 在CSS文件中,可以使用`@import`规则来导入另一个CSS文件。这种方法适用于CSS内部导入外部样式表,而非在JavaScript中使用...

    js 动态加载网页样式

    总结一下,动态加载网页样式是通过JavaScript(尤其是jQuery)来实现实时更改CSS样式,提高用户体验。通过结合`jquery.cookie.js`,我们可以将用户的个性化选择保存在Cookie中,使得刷新页面后仍然能够保持用户定制...

Global site tag (gtag.js) - Google Analytics