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

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

このQ&Aに関連する最新のQ&A

A 回答 (2件)

具体的な崩れ方が、明記されていないので、


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

この回答への補足

ありがとうございます。

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

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

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

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

補足日時:2011/04/28 23:28
    • good
    • 1
この回答へのお礼

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

お礼日時:2011/04/29 00:04

よくわかりませんが…



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

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

この回答への補足

ありがとうございます。

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

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

補足日時:2011/04/28 23:30
    • good
    • 0
この回答へのお礼

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

お礼日時:2011/04/29 00:05

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

QjQueryでクリックされた要素のidを関数で取得

以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。
関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。

[htmlソース]
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">B</a>
<a class='alphabet' id='c' href='' onclick="return false;">C</a>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.alphabet').click(function(){
function alertAlphabet(){
alert($(this).attr('id'));
};
alertAlphabet();
});
});
</script>

以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。
関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。

[htmlソース]
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">...続きを読む

Aベストアンサー

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.alphabet').click(function () {
// 直接指定
alert($(this).attr('id'));
// 関数経由
alertAlphabet($(this));
});
});
function alertAlphabet(obj) {
// objはjQueryオブジェクト
alert(obj.attr('id'));
};
</script>
</head>
<body>
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">B</a>
<a class='alphabet' id='c' href='' onclick="return false;">C</a>
</body>
</html>

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.alphabet').click(function () {
// 直接指定
alert($(this).attr('id'));
// 関数経由
alertAlphabet($(this));
});
});
function alertAlphabet(obj) {
// objはjQu...続きを読む

QCSSでボックス幅を文字列に合わせたい

ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。
テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。

Aベストアンサー

div等のblock要素ではなくspan等のinline要素によって行う。

<span style="border:solid 1px">文字幅に合わせた枠線</span>

Q-css- ページオープン時やリロード時の表示崩れの回避方法

現在構築中のサイトでカルーセルを使って画像リストをamazon風に表示させるページを作っています。
http://sorgalla.com/projects/jcarousel/examples/static_simple.html

ただページオープン時やリロード時に一瞬リスト形式に縦に画像が並んで見えてしまいます。
わりと長いリストを載せる予定なんですが、一瞬でもやっぱり不恰好です。
この<div>内のみスタイルシートも完全に読み込むまで表示させないなど、
何か回避する方法はありませんでしょうか?

ちなみに<body>~</body>を完全に読み込むまで表示させない方法はあるのですが、
これだとページ内のflash(プレローダー付)も完全に読みこむまで表示しないので、それでは反応が遅すぎるのです。

Aベストアンサー

<<<body style="visibility:hidden" onLoad="document.body.style.visibility='visible'">~</body>でできるようなことを、<div>~</div>内だけで装備するのって無理ですかね?>>
って、ご自身でもう解決策に気づかれているじゃないですか。
お使いのjQueryにもjCarouselにもその機能ありますよ。
jCarouselのitemLoadCallbackオプションにitemロード時のコールバック
ファンクションが登録できるみたいですよ。
試してみては
http://sorgalla.com/projects/jcarousel/

Q独自ドメインからどこのレンタルサーバーを使用してるか調べる方法

独自ドメイン(www.好きな名前.com等)からどこのレンタルサーバーを使用してるか調べる方法を教えて下さい。
またレンタルサーバー専用会社なのか大手プロバイダのレンタルサービスを使用してるかを調べる方法をできれば具体的に教えて下さい。

Aベストアンサー

.comや.orgなどならば http://www.whois.sc/
でドメイン名を入れて検索すると、
その結果表示の中の IP location という項目に
会社名がでます。

.jpならば コマンドプロンプトで"ping サーバ名"で
IPアドレスを取得、次に http://www.nic.ad.jp/
下部左の部分にそのIPアドレスを入れて検索すると
会社名がでます。

でドメインを入れて

Q存在しないページを指定してもTOPページへリダイレクトする方法?

最近ホームページの構成を変更したんですが、検索エンジンから来てルートディレクトリに該当するHTMLファイルがないとpage not foundになってしまいます。
そこで、どんなHTMLファイルにきてもTOPページのindex.htmlに飛ばせる方法ってありますか?
確かhttp://www.directnic.com/ではhttp://www.directnic.com/xxxx とどんなサブディレクトリを指定してもTOPページに行くようになってます。

Aベストアンサー

まず、#2 の方が提示されている様に
.htaccess ファイルを用いて実現できると思います。
(簡単な例示:ErrorDocument 404 /index.html
 DocumentRootから見た絶対パスを記します。)

ただ、ご希望の仕掛けそのままを実現する事は再考をお勧めします。
それはTOPページへ即 飛ばす事です。
閲覧者が当該ページがない事を認識できない可能性があります。
それから質問で提示のサイトも単にTOPページに飛ばしているのではなく、
CGIを用いてエラー情報を編集しているか別のページでTOPページと類似の記述がされている物と思われます。

よって.htaccess ファイルを用いてエラーページを自作してそちらをエラー時に表示する様に指定して、
エラーページにてTOPページと同等の情報を記述しておくかTOPページへのリンクなり自動更新を用意する事をお勧めします。

参考URL:http://www.shtml.jp/htaccess/404.html

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

Qforeachで回った数を表示したい

単純な質問ですみません。
====
//getTestlistは別ファイルで定義済み。
<?
$testlist=getTestlist();
foreach($testlist as $test){
?>


<? } ?>
====
例えば↑こんなふうにforeachで$testlistが存在するだけ回したとします。
そのときに何回まわったか?($testが何件あったか?)だけを表示したいのですが、そんなことってできますか?
表示したい位置は<? } ?>の外側にと考えています。
あさってな質問でしたらすみません。
phpVer 4.3

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

Aベストアンサー

<?
$testlist=getTestlist();
$n=0;
foreach($testlist as $test){
$n++;
?>
<?}?>

<?=$n?>回
とかでよいかと思います。

途中でbreakなどが無ければ
<? echo count($testlist) ?>でも良いかも知れません。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報