Q&A
スクリプトのオプションは合っていますか？ スクリプト用のCSSは適用されていますか？
前提・実現したいこと
現在指定したロゴは左端に寄っています。
それを画面中央に移動させたいです。
該当のソースコード
<body> <!-- loading --> <div id="fakeloader"></div> <!-- header --> <header> <div class="logo"> <a href="index.html"> <img src="./img/logo.png" alt="ChiePro"> </a> </div>
<!-- footer --> <footer> <p>footer</p> </footer> <script type="text/javascript"> $("#fakeloader").fakeLoader({ timeToHide:2000, zIndex: 999, bgColor:"#543643", imagePath:"./img/loadinfo.net.gif" }); </script> </body> </html>
補足情報（FW/ツールのバージョンなど）
http://joaopereirawd.github.io/fakeLoader.js/ サイト
http://vdeep.net/fakeloader 導入の参考にしたサイト
win10 64bit
コピペしているので合っています！適用もされてます。
質問者さんのオリジナル画像では無く、もともと用意された画像で、キチンと中央に表示され動作に問題ないかの確認はお済でしょうか？
はい。サンプルはきちんと中央になっているのですが、gif指定をすると左に寄ってしまいます。
オプションの「timeToHide:」「zIndex:999」はカスタム画像の場合は要らないのでしょうか？
ご指摘いただいた部分を追加しましたが、やはり左に寄ったままです・・・
上下左右の中央にサンプルは来ているのでしょうか？
はい。オプションなしで指定するとサンプルは中央に表示されます。オプションで指定した場合のみ左に寄ってしまします。
オリジナルの画像では無く、サンプルのとおりに「オプションも入れて」みてはどうでしょうか？ 上の画像はオプション無しの場合でしょうか？
一応こちらがリファレンスになります。 https://github.com/joaopereirawd/fakeLoader.js 上の画像はimagePath:"./img/loadinfo.net.gif"の画像を指定しています
HTMLタグ「<div id="fakeLoader"></div>」は、どの位置にありますか？body直下でしょうか？
はい、直下に置いてあります！ ソースコード修正します
bodyのCSSはどうでしょうか？
text-align: center; に指定していしてます
「text-align: center; 」は問題ないと思います。 何か他のスクリプトは使用しているでしょうか？ もし、使用している場合、干渉している場合も考えられます。
"fl"というclass名はどこかで使っていないでしょうか？
jsで使っています。
回答2件
0
提示されている参考サイトを基にしました。
「fakeLoader.js」が正しく設置されていれば以下のようにサンプルのローディング画像が中央に来ます。
（オプション使用 spinner:"spinner1"）
オプションのオリジナル画像の場合も同じ位置に来ます。
（画像はフリー素材です。）
まずは、オリジナル画像ではない状態（オプションの「imagePath」をコメントアウトで無効にしたまま）で左右中央に来ない場合、再度、各設定とgoogleのデベロッパーツール等で、適用されているCSSを確認された方が良いかと思います。
投稿2018/07/03 03:35
総合スコア3523
0
スクリプトを見てもらえればわかりますが、内部では $('.fl') をロードアイコンとみなして使っています。
そのため、class名に "fl" が使われていると誤動作を引き起こします。
このライブラリの作りが悪いのですが、仕方ないので名前が被らないようにしてください。
http://joaopereirawd.github.io/fakeLoader.js/js/fakeLoader.js
投稿2018/07/12 08:34
総合スコア13749
あなたの回答
tips
プレビュー
