ページ読込中に表示が崩れるのを直したい。

質問

ショッピングカートのASPを使っていて、javascriptをheadで読み込めません。
そのせいなのかわかりませんが、スライドショーのjqueryを使用すると、ページ読み込みの際に、
スライドショーの中の画像が崩れた形で表示されます。
数秒待てば通常の表示に戻るのですが、綺麗に表示させることはできないでしょうか？
javascriptでページ成形された後に、画像が読み込まれればいいのですが。

何卒よろしくお願い致します。

回答No.1

reggaepunc · ベストアンサー

具体的な崩れ方が、明記されていないので、
推測するしかないですが、
画像かhtmlかjsか、が読み込み完了するまでは、display:none;で非表示にしておき、
読み込み完了後に、フェードインなどで表示させればきれいに表示されます。

お礼

ありがとうございました。display:none;などで検索して理想の形で動かすことができました！

補足

ありがとうございます。

表示の崩れ方は、最初にページの大体の形が現れて、その後にスライドショーの画像がパラパラアニメのように同じ位置に表示されます。その後CSSで調節した位置にスライドショーの一枚目の画像が表示される、という感じです。

>>読み込み完了するまでは、display:none;で非表示

これはどのようにすればいいのでしょうか？また、スライドショーの画像が表示される場所だけあけておいて、全てが読み込み完了したらスライドショーが始まり、その間はプリロードのgifアニメをそこに出すという風にしたいのですが、可能でしょうか？

よろしくお願い致します。

回答No.2

fujillin

よくわかりませんが…

そのスクリプトが画像の実サイズ等を必要としないものであるのなら、画像読込みを待たずに実行することで崩れた状態が表示される前に制御可能ではないでしょうか？
具体的には、$(document).ready(function(){～とする代わりに、
HTMLソースの該当部分の直後で直接実行しておくという方法。

あるいは、No1様の方法とほぼ同じですが、初期設定のCSSなどで最終表示と同様の表示となるようにしておき（不要な画像はdisplay:noneなどで非表示にするなど）、スクリプト実行時に合せてスタイルを再定義するというような方法でなんとかなりそうな気がしますが…

お礼

ありがとうございました。display:noneで隠しておいて、onloadで表示するようにできました！

補足

ありがとうございます。

>>$(document).ready(function(){～とする代わりに、
>>HTMLソースの該当部分の直後で直接実行しておくという方法。

これはどうすればいいのでしょうか？javascriptはあまり詳しくないので、すいません…。お手数かけます。m(_ _)m