`

异步加载js文件并执行js方法:实现异步处理网页的复杂效果

阅读更多
var JSLoader = function(){
    
    var scripts = {}; // scripts['a.js'] = {loaded:false,funs:[]}
    
    function getScript(url){
        var script = scripts[url];
        if (!script){
            script = {loaded:false, funs:[]};
            scripts[url] = script;
            add(script, url);
        }
        return script;
    }
    
                
    function run(script){
        var funs = script.funs,
            len = funs.length,
            i = 0;
        
        for (; i<len; i++){
            var fun = funs.pop();
            fun();
        }
    }
    
    function add(script, url){
        var scriptdom = document.createElement('script');
        scriptdom.type = 'text/javascript';
        scriptdom.loaded = false;
        scriptdom.src = url;
        
        scriptdom.onload = function(){
            scriptdom.loaded = true;
            run(script);
            scriptdom.onload = scriptdom.onreadystatechange = null;
        };
        
        //for ie
        scriptdom.onreadystatechange = function(){
            if ((scriptdom.readyState === 'loaded' || 
                    scriptdom.readyState === 'complete') && !scriptdom.loaded) {
                
                run(script);
                scriptdom.onload = scriptdom.onreadystatechange = null;
            }
        };
        
        document.getElementsByTagName('head')[0].appendChild(scriptdom);
    }
    
    return {
        load: function(url){
            var arg = arguments,
                len = arg.length,
                i = 1,
                script = getScript(url),
                loaded = script.loaded;
            
            for (; i<len; i++){
                var fun = arg[i];
                if (typeof fun === 'function'){
                    if (loaded) {
                        fun();
                    }else{
                        script.funs.push(fun);
                    }
                }
            }
        }
    };
}();

 

调用方法示例:

先在页面上加载JSLoader.js文件

然后执行

 JSLoader.load('js/test.js' , function () {a();})

表示异步加载test.js文件,并且加载完成后再执行a()方法,a()方法是test.js里面的方法,a()方法就是负责渲染一些前端页面的网页效果来的。

不过该方法在ie7下并不会产生异步的效果,在ie7下需要使用延时触发器来包装一下,如:

setTimeout(" JSLoader.load('js/test.js' , function () {a();})", 1);

分享到:
评论

相关推荐

    js 异步加载js, css文件

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

    jsloader 异步加载js文件

    **JSLoader:异步加载JavaScript文件** 在网页开发中,JavaScript文件的加载是网页渲染过程中的关键步骤。大型应用往往包含多个JS文件,这可能导致页面加载速度变慢,影响用户体验。为了解决这个问题,开发者引入了...

    js异步加载代码

    JavaScript 异步加载是优化网页性能的关键技术,它能让页面在不等待脚本执行的情况下继续渲染,从而提高用户体验。在现代网页开发中,由于 JavaScript 文件的体积越来越大,同步加载(即默认方式)会阻塞浏览器解析...

    JS异步加载图片

    在JavaScript(JS)中,异步加载图片是一种优化网页性能的技术。它允许浏览器在不影响页面主要功能的情况下,按需或后台加载非关键资源,如图片。这样可以减少页面初次加载的时间,提高用户体验,特别是对于含有大量...

    动态加载外部JS文件

    动态加载外部JS文件是网页开发中的一个重要技术,它允许网页在需要时按需加载JavaScript资源,从而提高页面的加载速度,优化用户体验,并有效地管理复杂的项目结构。以下将详细阐述动态加载的原理、方法以及相关实践...

    JS异步加载库

    JavaScript(JS)异步加载库是一种能够帮助开发者在网页中延迟加载或按需加载JavaScript资源的工具。这种库可以显著提高网页性能,减少首屏加载时间,优化用户体验,特别是对于那些依赖大量脚本的复杂应用而言。下面...

    JS 动态树 异步加载树 xloadtree WebFXLoadTree

    标题 "JS 动态树 异步加载树 xloadtree WebFXLoadTree" 指的是在JavaScript中实现的一种特定的树形结构组件,它具备动态加载和异步数据获取的功能。这种技术常用于构建大型数据集的层级展示,如文件系统、组织结构或...

    js异步加载.docx

    JavaScript 异步加载是网页优化的关键技术之一,它允许脚本在不阻塞浏览器解析页面的情况下进行下载和执行。在传统的同步加载模式下,JavaScript 文件的加载会暂停HTML的解析,直到该脚本完全下载并执行完毕。这可能...

    手机移动端Tab选项卡切换带下拉数据异步加载js插件

    本文将深入探讨“手机移动端Tab选项卡切换带下拉数据异步加载js插件”的相关知识,包括其工作原理、实现方式以及如何优化。 1. **Tab选项卡设计** - Tab选项卡是一种常见的界面设计模式,它允许用户通过点击不同的...

    Echarts:基础折线图(含异步加载数据)

    异步加载数据可以提高页面加载速度,特别是处理大量数据时,也可以实现动态更新图表,让图表实时反映后台数据的变化。 总结来说,ECharts的基础折线图是通过定义配置项和数据来创建的,而异步加载数据则可以通过...

    异步加载的3d图片效果

    在IT行业中,异步加载是一种优化用户体验的重要技术,特别是在处理大量数据或资源,如图片时。在这个场景中,"异步加载的3d图片效果"指的是一个应用或项目,它结合了3D图像展示和异步加载技术,使得用户可以在浏览3D...

    Requirejs异步加载Dojo1.6

    Requirejs和Dojo是...总的来说,通过Requirejs异步加载Dojo 1.6,可以充分利用两者的优势,实现高效、模块化的JavaScript开发,并在Tomcat6服务器环境下顺畅运行。这不仅提升了代码的可维护性,也优化了用户体验。

    java实现ztree异步加载

    在IT领域,尤其是在Web开发...总结,Java实现ZTree异步加载涉及前端ZTree的配置、Ajax请求的发送,以及后端Java服务的处理和数据返回。理解这个过程并正确实施,可以显著提升ZTree的用户体验,尤其是在处理大量数据时。

    javascript函数动态加载javascript文件

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责处理客户端的交互和数据管理。在实际项目中,为了提高页面加载速度和优化用户体验,我们常常需要按需加载JavaScript文件,而不是一次性加载所有...

    scriptjs异步JavaScript加载器和依赖管理器

    `script.js`是一个轻量级且功能强大的工具,它允许开发者实现异步加载JavaScript文件,并有效地管理它们之间的依赖关系,从而提升网页的加载速度和用户体验。 1. **异步加载的优势** - **非阻塞加载**:传统的方式...

    vue动态加载外部依赖js代码实现

    2. **动态加载JS文件的实现** - 在浏览器环境中,可以通过创建`&lt;script&gt;`标签并动态插入DOM中来加载外部JS文件。 - 为了更好地控制加载过程并在文件加载完成后执行回调函数,通常会监听`script`标签的`onload`事件...

    lazyload异步加载图片

    - **SEO**:搜索引擎爬虫可能不会执行JavaScript,因此要确保对SEO友好的处理,如提供`noscript`标签。 - **性能监控**:定期检查性能指标,确保懒加载没有带来反效果,如过度增加滚动时的CPU使用率。 ### 5. 结论 ...

    JS读取本地文件夹和图片异步加载(图片LazyLoad)

    在本文中,我们将探讨如何使用JavaScript读取本地文件夹,并实现图片的异步加载,即图片的LazyLoad技术。 一、JavaScript读取本地文件夹 在浏览器环境中,出于安全考虑,JavaScript无法直接访问用户的本地文件系统...

    支持异步加载的纯手写的js树

    本人手写的一款js树形控件,附带图片,代码简洁,注释齐全,可读性高,易于维护,方便移植,结构清晰,思路明了,界面美观,同时支持异步加载,对浏览器的兼容行强,你还可以根据自己的需要扩展功能,可大量应用于...

Global site tag (gtag.js) - Google Analytics