Question

问题1：此代码如何异步加载css文件？据我所知，由于script.async = true，脚本文件是异步加载的;但似乎无法为css文件找到类似的行。

问题2：如果此脚本使用script.async = true;自async src＆＃34;＆＃34;是存在还是这个脚本覆盖它？

问题3：script.async = true;只异步加载javascript，jquery和ajax文件？

( function ( window, doc ) {

asyncLoader = function( urls, options ) {

    urls.foreach( function( i, file ) {
        loadFile( file, getExtension( file ), options );
    });

    // checking for a callback function
    if( typeof options.callback == 'function') {
        // calling the callback
        var readyStateCheckInterval = setInterval( function() {
            if( doc.readyState === 'complete' ) {
                clearInterval( readyStateCheckInterval );
                    options.callback();
            }
        }, 10 );
    }
}

var getExtension = function( file ) {
    var extension = file.split('.');
    return extension[extension.length - 1];
}, 
loadFile = function( file, ext, options ) {
    switch( ext ) {
        case 'js' :
            loadJs( file, options );
        break;
        case 'css' :
            loadCss( file );
        break;
        default :
        break;
    }
},
loadJs = function( url, options ) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild( script );
},
loadCss = function( url ) {
    var link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.href = url;
    document.getElementsByTagName('head')[0].appendChild( link );
}
// simple foreach implementation
Array.prototype.foreach = function( callback ) {
    for( var i=0; i<this .length; i++ ) {
        callback( i, this[ i ] );
    }
}
})( this, document );

Answer 1

CSS文件是异步加载的，因为它会在追加时立即进行评估。在执行DOM的其余部分时，Append以异步方式执行此操作。我已经看到有些人在不使用async = true的情况下使用标签同样的技巧，并且在不使用async = true的情况下似乎也能正常工作。
即使您将async属性添加到或标记，这仍适用于新浏览器。但是，与使用新的HTML5异步属性相比，javascript方式更像是一种解决方法，因此如果您不担心支持旧浏览器进行异步加载，则首选单独使用async属性。 async属性工作得更好，并且可以使用DOM更好，更直观地工作。
根据你的switch语句，script.async = true只在loadJs（）函数中被调用，只有当扩展名是'.js'时才会被调用。所以是的，javascript，jQuery和ajax文件将使用script.async = true加载，因为它们具有'.js'扩展名，但任何其他'.js'文件也是如此。

这是一个很好的资源，可以更多地阅读javascript异步技巧：async-javascript

需要帮助理解一个简短的JavaScript脚本

1 个答案: