jQuery：オンデマンドでcssをロード+完了したらコールバック
CSSファイルをオンデマンドでロードしたい（たとえば、ロードするCSSファイルを返すXML HTTPリクエストを実行するなど）style1.css、style2.css。 。
では、jQuery（またはプラグイン）にこれを行う方法はありますか？
- 複数のファイルの一括読み込み+それらすべてのCSSファイルをDOMに追加
- ロードが終了したとき：コールバックを起動します（「すべてのスタイルシートのロードが完了しました！」という警告など）。
アイデアは次のとおりです。htmlを介してxmlhttpをロードし、+ add 必須 css-filesをロードし、-何かが終了したら、そのhtmlを表示します。
何か案が？
ありがとう！
ロードする方法複数 CSSファイルコールバック付き要求に応じて
注：xdomain権限がない場合、$。getはローカルファイルのみをロードします
ワーキングデモ
ロード後、CSSが適用される前に、「allcssloaded」というテキストが表示されることに注意してください。おそらく、それを克服するために別の回避策が必要です。
$.extend({
getManyCss: function(urls, callback, nocache){
if (typeof nocache=='undefined') nocache=false; // default don't refresh
$.when.apply($,
$.map(urls, function(url){
if (nocache) url += '?_ts=' + new Date().getTime(); // refresh?
return $.get(url, function(){
$('<link>', {rel:'stylesheet', type:'text/css', 'href':url}).appendTo('head');
});
})
).then(function(){
if (typeof callback=='function') callback();
});
},
});
使用法
var cssfiles=['https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css', 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cerulean/bootstrap.min.css'];
$.getManyCss(cssfiles, function(){
// do something, e.g.
console.log('all css loaded');
});
cssファイルを強制的に更新するにはtrueを追加します
$.getManyCss(cssfiles, function(){
// do something, e.g.
console.log('all css loaded');
}, true);
@ Popnoodlesの答えは正しくありません。これは、すべてのアイテムが読み込まれた後ではなく、$。eachループが終了したときにコールバックが実行されるためです。その理由は、$.each操作がDeferredオブジェクト（$.whenによって予期される）を返さないためです。
修正された例を次に示します。
$.extend({
getCss: function(urls, callback, nocache){
if (typeof nocache=='undefined') nocache=false; // default don't refresh
$.when.apply($,
$.map(urls, function(url){
if (nocache) url += '?_ts=' + new Date().getTime(); // refresh?
return $.get(url, function(){
$('<link>', {rel:'stylesheet', type:'text/css', 'href':url}).appendTo('head');
});
})
).then(function(){
if (typeof callback=='function') callback();
});
}
});
これが私がそれをロードする方法です：
$(document).ready( function() {
var css = jQuery("<link>");
css.attr({
rel: "stylesheet",
type: "text/css",
href: "path/to/file/style.css"
});
$("head").append(css);
});
解決策は少し改善できると思います...まず、次のコード行を使用すると、次のようになります。
...
$.get(url, function(){
$('<link>', {rel:'stylesheet', type:'text/css', 'href':url}).appendTo('head');
});
...
あなたは実際にcssを取得するために2つの呼び出しを行っています：最初は$.get自体で、2回目は<link>をheadに追加するときです。 $.getを削除すると、cssも取得されますが、1回だけです。
...
$('<link>', {rel:'stylesheet', type:'text/css', 'href':url}).appendTo('head');
...
しかし、コールバック関数を呼び出す前にこれらのcssを取得するときに、さらに多くのこと（スクリプトファイルのロードなど）を行う必要がある場合は、when...thenソリューションの代わりにpromisesを使用する方がよいと思います。あなたはこのようなことをすることができます：
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のロードに時間がかかる場合、それらすべてが取得されるまでコールバック関数は実行されません。
リソースの遅延読み込みを実現しようとしています。この種の動作を処理するためのさまざまなプラグインがあります。
私はこれに2つの名前を付けることができます：
プラグインページからの2つのスニペットは、その使用法を示しています。
Jqueryプラグイン
$.plugins({ path: '/scripts/', plugins: [
{ id:'box', js:'box.js', css:'box/styles.css', sel:'a[rel*=box]', ext:'box', fn:'box' },
]});
jQuery(document).ready(function($){
$('a').box();
});
依存関係で怠惰：
$.lazy('ui.draggable.js','draggable',{
'css':['modal.css','drag.css'],
'js':['ui.core.js']
});
// And then you use you plugins as you always do
$("#draggable").draggable();
これはCSSファイルを2回以上ロードする必要はありません
他の確立された答えから離れて、私はこれを思い付くことができました。これはjQuery.getScript()と同様に機能するようです。
(function($){
$.extend({
getCss: function(url, success) {
if ($("head").children("style[data-url='"+url+"']").length) {
console.warn("CSS file already loaded: "+url);
}
var deferred = $.Deferred(function(defer){
$.ajax({
url: url
,context: {defer:defer,url:url}
,dataType: 'text'
,cache: (function(){
var cache = $.ajaxSetup().cache;
if (cache === undefined) {cache = false;}
return cache;
})()
})
.then(
function(css, textStatus, jqXHR){
css = "\n\n/* CSS dynamically loaded by jQuery */\n\n"+css;
$('<style type="text/css" data-url="'+this.url+'">'+css+'</style>').appendTo("head");
this.defer.resolve(css, textStatus, jqXHR);
}
,function(jqXHR, textStatus, errorThrown){
this.defer.reject(jqXHR, textStatus, errorThrown);
}
);
});
if ($.isFunction(success)) {deferred.done(success);}
return deferred;
}
});
})(jQuery);
要求されたファイルを複数回ロードすることはありません。[〜＃〜]は[〜＃〜]、CSSコンテンツを静的に保存する必要があります。頭の中で。ただし、JavaScriptの読み込み/評価は、レンダリングのためにブラウザーがスタイリングにアクセスする方法とは異なることを考えると理にかなっています。
$.getCss('path/to/css/file.css')
.done(function(){
console.log("Worked");
})
.fail(function(){
console.log("Failed");
});
これまで、Chrome、IE、Firefoxでテストしてきました。すべて正常に動作しているようです。
動的に（読み取り：オンデマンドで）実行したい場合は、loadCssFile()に対するWhitの応答を変更し、ロードするファイルでそれを呼び出すことができます。
function loadCssFile(pathToFile) {
var css = jQuery("<link>");
css.attr({
rel: "stylesheet",
type: "text/css",
href: pathToFile
});
$("head").append(css);
}
複数のCSSファイルをロードしたいが、それらを1つずつロードしたい場合は、以下のソリューションを使用できます。
var getCss = function (url, callback) {
$.get(url, function () {
$('<link>', {rel: 'stylesheet', type: 'text/css', 'href': url}).appendTo('head');
if (typeof callback == 'function') callback();
});
};
上記の関数を定義してから、必要なcssファイルを含む配列を定義します
var cssfiles = ['css/pic1.css', 'css/pic2.css',
'css/pic3.css', 'css/pic4.css', 'css/pic5.css',
'css/pic6.css', 'css/pic7.css', 'css/pic8.css',
'css/pic9.css'];
次に、配列内の各cssファイルを呼び出すコールバック関数を定義します
var callback = function (index) {
getCss(cssfiles[index], function () {
if (index + 1 < cssfiles.length) {
callback(index + 1);
}
});
};
次に、インデックスを指定して、最初のcssファイルで関数を開始します
callback(0);