Решение можно немного улучшить, я думаю ... Прежде всего, когда вы используете следующие строки кода:
...
$.get(url, function(){
$('<link>', {rel:'stylesheet', type:'text/css', 'href':url}).appendTo('head');
});
...
Вы действительно делаете 2 вызова для получения css: сначала в самом $.get
и во второй раз, когда вы добавляете <link>
в head
. Удаление $.get
также приведет к получению CSS, но только один раз:
...
$('<link>', {rel:'stylesheet', type:'text/css', 'href':url}).appendTo('head');
...
Но если вам нужно сделать больше вещей (например, загрузить файл скрипта) при получении этих css 'перед вызовом функции обратного вызова, я думаю, что лучшим подходом для этого будет использование обещаний вместо when...then
решение. Вы могли бы сделать что-то вроде этого:
var requests = []; //array which will contain every request we want to do before calling the callback function
$.map(urls, function(url) { //urls is the array of css files we want to load
var defer = $.Deferred();
defer.promise();
//we add the deferred object to the requests array
requests.push(defer);
var cssEl = $('<link>', { rel: 'stylesheet', type: 'text/css', 'href': url });
cssEl.appendTo('head').on("load", function() {
defer.resolve();
});
});
var anotherRequest = $.ajax({...}); //eg. a script file
requests.push(anotherRequest);
$.when.apply($, requests).done(function() {
// callback when all requests are done
});
Таким образом, если для загрузки некоторых из css требуется некоторое время, функция обратного вызова не будет выполнена, пока не будут получены все из них.