脚本加载时css动画被绞死

时间:2014-09-15 08:35:06

标签: jquery css3 animation css-animations getscript

我正在使用jquery的$.getScript块来缓存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的问题。但是非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

你需要打开async:true,类似于bellow

$.ajaxSetup({async: true});