jquery - css 动画在脚本加载时被挂起

Question

我正在使用 jquery 的 $.getScript block 来缓存 javascript 文件。

这是使用 $.when

的代码

function loadResources() {
    $.ajaxSetup({
        cache:true
    });
    $("#animate").removeClass("hideBlock");

    $.when(
        $.getScript( "http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ),
        $.getScript( "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js" ),
        $.getScript( "http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js" ),
        $.getScript( "http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js" ),
        $.getScript( "http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js" ),
        $.getScript( "http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" ),
        $.getScript( "http://ajax.googleapis.com/ajax/libs/mootools/1.5.1/mootools-yui-compressed.js" ),
        $.getScript( "http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js" ),
        $.getScript( "http://cdn.kendostatic.com/2013.1.319/js/kendo.aspnetmvc.min.js" ),
        $.getScript( "http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js" ),
        $.getScript( "http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js" ),
        $.getScript( "http://demos.telerik.com/kendo-ui/content/shared/js/kendo-dojo.js" ),
        $.getScript( "http://demos.telerik.com/kendo-ui/content/shared/js/console.js" ),
        $.getScript( "http://demos.telerik.com/kendo-ui/content/shared/js/prettify.js" ),
        $.getScript( "http://demos.telerik.com/kendo-ui/content/shared/inspector/inspector.js" ),
        $.Deferred(function( deferred ){
            $( deferred.resolve );
        })
    ).done(function(){
        $("#animate").addClass("hideBlock");
        $.ajaxSetup({
            cache:false
        });
    });
}

HTML:

<a id="trigger" href="javascript:void(0)">Click to load</a>
<div id="animate" class="hideBlock"></div>

在我的 html 中，我使用了 css3 动画。只要脚本正在加载，就应该显示此动画。

JSFIDDLE:http://jsfiddle.net/nL1ubLyt/3/

当使用 $.getScript 加载脚本时，加载动画会在 Firefox 中挂起。在 chrome 中工作正常。我不认为这是 $.getScript 的问题。但非常感谢任何帮助。

Answer 1

你需要打开 async : true ，类似下面的内容

$.ajaxSetup({async: true});