2016-06-17 19 views
0

私のサイトはhttp://donoriolo.com/に公開されており、フロントページにはHTMLコンテンツのbxSliderがあります。bxSliderでHTMLコンテンツをスムーズに読み込む方法

私の問題は、あります第二(または私より低速接続の悪いことに、私は確信している、)コンテンツが完全にunstyledで、ウィンドウ全体を占め、そのような場所:

screenshot of unstyled content

すべてがロードされた後でも、ページを離れて戻ってきても、1秒間隔で起こります。

体の端ではなく頭の中に私のJSを貼り付けようとしましたが、運がありません。他のアイデア? ...またはそれを忘れてスライダーの画像を使用するだけでいいのですか?

答えて

0

あなたの設定を知らないと、私は本当に分かりません。しかし、私の推測では、JavaScriptを使用してスライダーをhttp://donoriolo.com/js/script.min.jsに初期化するということです。

このスクリプトはあなたのコンテンツ(DOM)の後に読み込まれているため、当分の間は表示されません。

これを解決するにはどうすればよいですか?

まあ、最も簡単な方法は、コンテンツの前にスクリプトをロードすることです。これは、<body>の代わりにスクリプトタグを<head>に移動することで実行できます。スクリプトタグによって私はofcourseを意味します:

<script src='/js/script.min.js' charset="utf-8"></script> 

これは、スクリプトが読み込まれるまであなたのウェブサイトは表示されません。それは本当に大きな問題ではないかもしれませんが、接続の遅い訪問者(モバイル訪問者を含む)は、ページの読み込みが遅いことに気付くでしょう。また、これはSEOに関して問題があります。私はどうなるのか

、スライダーを隠している:

... 
<div class="bxslider" style="display: none">...</div> 
... 

、スクリプトがそうどこかにあなたが持っているでしょうscript.min.jsの最後には、実行後、再びそれを示しています。

$('.bxslider').show(); 

あなたがかもしれませんたとえば、displayプロパティの代わりにopacityを使用するなど、いくつかの派手なアニメーションでこれを拡張したいと考えています。

+0

ありがとうございました!私が言ったように、何らかの理由でスクリプトを頭の中に入れて何らかの理由でそれをしなかったのですが、不透明度をアニメーション化することは効果的です。 :) – Eriyu

関連する問題