JSを介していくつかのHTMLコンテンツといくつかのCSSURLを動的に挿入したいと思います。
3つ以上のCSSファイルがあります。コンテンツをページに挿入する前にダウンロードしてほしい。
上記のファイルがダウンロードされているかどうかを確認する方法はありますか？
これがどのように機能するかです：
厄介な回避策を使用して CSS が読み込まれたかどうかを判断する代わりに、AJAX 関数を使用して動的 CSS URL を作成し、それをプレーン テキストとして取得できます。
生のテキストをフェッチした後、この関数を使用して CSS をstyleタグに挿入し、コールバックを追加できます。
function loadCss(cssText, callback) {
var style = document.createElement('style');
style.type='text/css';
if(callBack != undefined){
style.onload = function() {
callback();
};
}
style.innerHTML = cssText;
head.appendChild(style);
}
これを次のように使用できます。
loadCss(ajaxResponseText, function(){
console.log("CSS loaded, you can show the dialog now :)");
})
あなたのコメントで、ロードする必要があると述べましたがjQuery、jQueryUIそれは別のドメインにあると推測しています。
AJAX クロスドメイン制限を回避するには、このリンクまたはこのリンクまたはこのライブラリを確認してください。
YepNope.jsを使用できます。YepNopeを使用すると、非同期条件付きテストを作成して、リソースが読み込まれたかどうかを確認できます。テストに合格したら、新しい CSS または JS ファイルを挿入するように指示できます。
以下の例は、YepNope.js サイトから取得したものです。
yepnope.injectCss( stylesheetSource [, callback ] [, elemAttributes ] [, timeout ]);
// Example
yepnope.injectCss("print.css", function () {
console.log("css injected!");
}, {
media: "print"
}, 5000);
最初に YepNope に最初の CSS ファイルをロードさせ、ロードが完了すると、YepNope にコールバックをトリガーして、追加の JS または CSS ファイルのロードなどの追加のタスクを実行させることもできます。
<html>
<head>
<!--
Put your styles here. Make sure the *last* CSS file has the following:
body { display: block !important }
This will allow the stylesheets to load while the body is hidden.
When the last stylesheet is loaded, the body will be visible.
-->
</head>
<body style="display: none">
<!-- Lots of HTML here -->
<!--
Put your script tags here.
In the first script, I recommend binding to the window.load event...
which will be fired once all your scripts are done loading.
-->
</body>
</html>
私たちのチームが開発するアプリを構築する際には、多数の CSS およびスクリプト ファイルが存在する可能性があり、HTML のヘッダーがかなり面倒に見える場合があります。すべてのファイルを配列としてメソッドに渡すことで、すべてのファイルをロードする小さなスクリプトを作成しました。ただし、独自のスクリプト ファイルに loadCSS() があり、HTML の script タグを介して配列を呼び出して渡すだけです。コードは、見やすくするためにモノリシック形式になっています。
window.onload = function() {//Use $(document).ready() if using jQuery
var cssArray = ["Style01.css", "Style02.css", "Style03.css"];
loadCSS(cssArray, function () {
alert("Style sheets have been loaded.");
});
//Note: You can do a similar process for the JS files.
//Load HTML when CSS is finished - Shown below
loadHTML();
}
function loadCSS(array, callback) {
var cssArray = array;
for (var i = 0; i < cssArray.length; i++)
{
document.write("<link rel='stylesheet' type='text/css' href='styles/" + cssArray[i] + "' />");
//console.log(cssArray[i] + " style sheet has been loaded.");
//Detects when for loop is finished evaluating the Array
if (i == cssArray.length - 1) {
return callback();
}
}
//loadHTML() can also be invoked here to ensure CSS files have been loaded.
}
HTML を動的に構築しようとしている場合は、CSS ファイルがロードされた後に次のようなことを試すことができます。
function loadHTML() {
//Create Main Table
var mainTable = document.createElement("table");
mainTable.id = "mainTable";
mainTable.cellPadding = 0;
mainTable.cellSpacing = 0;
mainTable.border = 0;
//Create Body
var mainBody = document.createElement("tbody");
//Create Table Row
var mainTR = document.createElement("tr");
mainTR.style.height = "50px";
mainTR.className = ""; //Insert class from one of the style sheets
//Create Main Cell
var mainTD = document.createElement("td");
mainTD.id = "mainTD";
//mainTD.style.width = "";
mainTD.style.textAlign = "left";
mainTD.style.padding = "5px 10px 5px 10px";
mainTD.className = ""; //Insert class from one of the style sheets
mainTD.innerHTML = "Test Text";
mainTR.appendChild(mainTD);
mainBody.appendChild(mainTR);
mainTable.appendChild(mainBody);
document.body.appendChild(mainTable);
}
ご不明な点がございましたら、お気軽にお問い合わせください。すでにいくつかの良い例が投稿されていますが、これが役立つことを願っています。
どうですか :
$(document).ready(function() {
$("body").hide();
});
次に、ダウンロードしたcssファイルで：
body { diaplay:block; }
ページに要素を追加して、いくつかの js で必要なスタイルを確認してみませんか。そのスタイルがある場合、そのスタイルシートはおそらくロードされています。
このような：
if (document.getElementById("csspage-3-box").style.color === "#somethingUnique") {
//it is loaded
}
各スタイル シートに固有の ID を持ついくつかの非表示の div を追加できます。スタイルがある場合は、必要なシートが読み込まれていることがわかります。この操作は安価です。ただし、セマンティックではない div 要素がいくつか追加されます。そうは言っても、誰もがDOMに少なくとも1つの非セマンティック要素を持っているように感じます。
単なる提案ですが、3 つの css ファイルはそれほど多くありません。その他の簡単な解決策には、次のものがあります。
A) それらを猫化して縮小し、一度に配信することができます。
B) それらを CDN (aws s3 + クラウドフロントなど) に投げます。これは非常に安価で、並行してロードされます。
C) 通常どおりロードするだけです。サブドメインに配置することもできます。
それはさておき、もし私があなただったら、CSS をたくさんのファイルに分割します。3 はファイルが少なすぎます。グリッドとすべての要素タイプを分離します。次に、ページ (またはページ グループ) ごとに再組み立てします。これにより、必要に応じて個々のピースを含めることができます。
結局のところ、リンク タグを追加するのはかなり簡単です (リンク タグへのパスを簡単に取得できる限り)。スタイル タグの代わりにリンクを使用することをお勧めします。これは、CDN ルートまたはサブドメイン ルートを使用すると、xhr で css ファイルのコンテンツを取得しようとするとクロスドメインの問題が発生するためです。
を使用loadCSSしてロードしますCSS。メソッド内onloadに、すべての css ロード後に実行するコードを配置します。
var counter = 0;
function onload(){
counter--;
setTimeout(function(){ // insuring if loaded immediately
if(counter == 0){
// your code here //******** CODEREPLACE ************/
alert('all css files loaded!');
}
});
}
function loadCSS(href){
counter++;
l = document.createElement('link');
l.href = href;
l.onreadystatechange = function () { // For IE
if (this.readyState == 'loaded'){
onload.call( this );
}
};
l.rel = 'stylesheet';
l.type='text/css';
l.onload = onload;
document.getElementsByTagName('head')[0].appendChild(l);
}
loadCSS('http://www.google.co.in/search?q=load+css+files+dynamically&aq=f&oq=load+css+files+dynamically&sugexp=chrome,mod=1&sourceid=chrome&ie=UTF-8');
私はそれがきれいな解決策ではないことを知っていますが、DOM<style>に を挿入する代わりに、 AJAX を使用して CSS ファイルを取得し、そのコンテンツを に追加することができます。<link>AJAX を使用すると、CSS がいつ完全にダウンロードされたかを確実に知ることができ、条件に従ってすべてをページに追加できます。
これは、あなたが望んでいたことの線に沿っていると思います：
<html>
<head>
<!-- CSS Stuff goes here -->
<!-- JS Stuff come right after -->
</head>
<body>
<!-- HTML Stuff comes withing Body -->
</body>
</html>
これにより、次のことが発生します。
あなたの質問は少しわかりにくいですが、明確にしてもらえますか? なぜそのような注文が必要なのか理解できませんでした。全体像を教えていただけますか? JS は、起動して忘れる言語であることを意図しており、すべてがダウンロードされているかどうかを確認するのは厄介です。これはあなたにとって意味がありましたか、そして/またはあなたを助けましたか?
whileを実装するためにループを使用してはならないのと同じ理由で、これはお勧めしませんsleep()が、必要な場合は試してみてください。
リンクされた回答では、参照スタイルが追加されました。例: #ensure-cssload-8473649 { display: none }. ただし、自分の管理下にないファイルをダウンロードしているため、検出のためにシートからいくつかのスタイルを選択する必要があります。
cssLoad()機能は次のとおりです。
var onCssLoad = function (options, callback) {
var body = $("body");
var div = document.createElement(constants.TAG_DIV);
for (var key in options) {
if (options.hasOwnProperty(key)) {
if (key.toLowerCase() === "css") {
continue;
}
div[key] = options[key];
}
}
var css = options.css;
if (css) {
body.appendChild(div);
var handle = -1;
handle = window.setInterval(function () {
var match = true;
for (var key in css) {
if (css.hasOwnProperty(key)) {
match = match && utils.getStyle(div, key) === css[key];
}
}
if (match === true) {
window.clearTimeout(handle);
body.removeChild(div);
callback();
}
}, 100);
}
}
次のように使用できます。
onCssLoad({
"id": <insert element CSS applies to>,
css: <insert sample CSS styles>
}, function () {
console.log("CSS loaded, you can show the dialog now :)");
});