美文网首页Web 前端开发 iDesign前端开发
异步加载JS时的加载顺序问题

异步加载JS时的加载顺序问题

作者: aokaywe | 来源:发表于2016-06-30 08:45 被阅读0次

通过document.createElement('script')方式加载JS文件时,文件是动态加载进来的,没法控制加载的顺序。下面是简单的解决办法,更好的解决办法是使用AMD或CMD方式来管理模块,比如require.js或sea.js


var requireFile = function (file, callback) {
    callback = callback || function () {};
    var filenode;
    var jsfile_extension = /(.js)$/i;
    var cssfile_extension = /(.css)$/i;

    if (jsfile_extension.test(file)) {
        filenode = document.createElement('script');
        filenode.src = file;
        // IE
        filenode.onreadystatechange = function () {
            if (filenode.readyState === 'loaded' || filenode.readyState === 'complete') {
                filenode.onreadystatechange = null;
                callback();
            }
        };
        // others
        filenode.onload = function () {
            callback();
        };
        document.head.appendChild(filenode);
    } else if (cssfile_extension.test(file)) {
        filenode = document.createElement('link');
        filenode.rel = 'stylesheet';
        filenode.type = 'text/css';
        filenode.href = file;
        document.head.appendChild(filenode);
        callback();
    } else {
        console.log("Unknown file type to load.")
    }
};

var loaded = [];

var requireFiles = function () {
    var index = 0;

    return function (files, callback) {
        callback = callback || function () {};
        index += 1;
        f = files[index - 1];


        //console.log(loaded);

        if(loaded.indexOf(f) != -1) {
            //console.log("pass:",f);
            callBackCounter();
        }else{
            requireFile(f, callBackCounter);
            loaded.push(f);
        }

        function callBackCounter() {
            if (index === files.length) {
                index = 0;
                callback();
            } else {
                requireFiles(files, callback);
            }
        };
    };
}();

相关文章

  • 异步加载JS时的加载顺序问题

    通过document.createElement('script')方式加载JS文件时,文件是动态加载进来的,没法...

  • html,css,js加载顺序

    1. 加载方式 css 异步加载(不阻塞)js 同步加载(阻塞) 2. 放置顺序 css 放置于 标签中原因:...

  • Review JavaScript

    红宝书 综合 script加载js会阻塞渲染,标签中 fefer 指异步加载js,在文档load之后按顺序执行。a...

  • js加载同步还是异步? JSONP原理?

    1、浏览器端的js加载默认是同步还是异步?同步,可以人为设置异步;async让js异步加载,需要每个script标...

  • Three.js跨域问题(无法预览)

    Three.js跨域问题 通过Three.js加载obj、FBX等格式外部模型文件的时候是ajax异步加载数据的过...

  • 系统源码简析

    同步加载 异步加载 页面的懒加载,只针对vue文件,js文件被放到app.js中了, 比如 share.js。 a...

  • 浏览器加载机制&白屏和FOUC演示

    1、如何异步加载脚本? 一般情况下,浏览器在加载js文件时,会阻塞其他组件的加载,因为js可能会改变页面结构或js...

  • javascript性能优化

    优化页面加载时间html标签加载顺序浏览器加载和执行script标签引入的js时,会暂停页面渲染,直到代码加载并执...

  • vue问题笔记--异步加载

    记录项目开发过程中遇到的点滴问题 1.组件做成异步加载是为了减少首次加载时js包的大小,现在变成了路由跳转时需要先...

  • webpack打包代码实现

    webpack模块加载 异步模块加载 通过 import()实现指定模块的懒加载操作 懒加载的核心原理就是创建js...

网友评论

    本文标题:异步加载JS时的加载顺序问题

    本文链接:https://www.haomeiwen.com/subject/hhwxjttx.html