我正在使用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的问题。但是非常感谢任何帮助。
答案 0 :(得分:0)
你需要打开async:true,类似于bellow
$.ajaxSetup({async: true});