
画面の表示位置を指定させて表示させたいのですが、カクカクさせずに表示させるにはどうしたらよいでしょうか?
下記書き方だと一度普通に表示されて、それから移動するみたいで、
一瞬、画面がカクカクしてしまいます。
初めから、移動させた状態で画面を表示させるには、どうしたらよいでしょうか?
<body onload="init();">
<script type="text/javascript">
function init(){
window.scrollTo("0","200");
}
</script>
No.6ベストアンサー
- 回答日時:
> なるべくスクロールさせたくない
ANo.3で回答したとおり、一度普通に表示されてから移動するのは正常な動作ですので、この仕様を変更することはできません。
> 予め画像を読み込む処理
画像プリロードによってやりたかったのは、あらかじめ画像サイズを取得することではないのですか?そう、解釈してANo.5は回答しました。
> スクロールしかない場合は、なるべく目立たないようにしたい
1.bodyの高さをあらかじめ適当なもの(長め)に設定する。
2.該当座標に移動する。
3.onLoad処理で、bodyの高さを本来のものにする。
<body onload="init();">
<script type="text/javascript">
document.body.style.height="2000px";
window.scrollTo("0","200");
function init(){
document.body.style.height="auto";
}
</script>
カクカクというのが分からなかったのでいろいろ書きましたが、ひとまず、このようにすれば、htmlレンダリング前に座標は移動できると思います。(JSをbodyの直前か先頭に書くことが前提)もしくは、jQueryのready()で指定すれば、こんな小細工はいらなかったような気がしますが、jQueryは本題ではないので割愛します。
No.5
- 回答日時:
ページが表示されるまでに行われるのは、html&CSSレンダリング → javascript onLoad → 画像ロードの順です。
ページ内に使用しているimgタグには、height属性は指定されていますか?
この属性を指定しないと、画像が完全に読み込まれるまで画像サイズを取得できません。その結果、ページ内すべての画像が完全に読み込まれるまでページ長は決定されません。つまり、onLoadの時点ではまだページ長が決定されていないと思われます。
すべての画像にheight属性を設定すれば、画像のロード前(htmlレンダリング時)にページ長は決定されるので、もしかしたら、カクカクがなくなるかもしれません。
この回答への補足
>すべての画像にheight属性を設定すれば、画像のロード前(htmlレンダリング時)にページ長は決定されるので、もしかしたら、カクカクがなくなるかもしれません。
ありがとうございます。参考にさせていただきます。
……すいません、今更言いづらいのですが、
質問の仕方が大変マズかったようです。
知りたかったのは、
ページ内リンクを使わずに、予め指定した画面の表示位置を(スクロールさせずに)表示させるためには、どうしたらよいか、ということなんです。
画像のプリロードって書いたのは、
javascriptだと、予め画像を読み込む処理ができるのかな?と思い、
だったら、予め、スクロール位置を指定する何かの処理がもしかしたらできるかな? という意味で、質問しただけです。
やりたいことを整理すると、
1.予め指定した位置で表示させたい
2.なるべくスクロールさせたくない(←これ言ってなかったです、すいません)
3.スクロールしかない場合は、なるべく目立たないようにしたい
1.2.が、難しいようなら、fujillinさんに教えてもらった、
スクロールさせるが、最初はhiddenにするやり方でいきたいと思います。
No.4
- 回答日時:
No2です。
>画面の位置が一旦普通に表示された後移動することを、カクカクと表現しました。
画像のロードに時間がかかるのが、タイムラグの原因と創造されます。
連続的でないためにカクカク感じられるのであれば、いっそのこと、スクロールの動作を連続的にしてあげればカクカクには感じないかも。
とはいうものの、最終表示まではもっと時間がかかることになってしまいますが。
onloadに設定しているためにタイムラグが生じると考えられるので、画像サイズを指定しておいて、bodyの終了タグの前にスクリプトをおいてあげれば画像の読込み前に移動できるかも・・・(未検証です)
No.3
- 回答日時:
回答にはなっていませんが、参考までに。
>> 一度普通に表示されて、それから移動する
これは正常な動作です。ただし、使用するPC、あるいはブラウザによってかなりの体感差があるはずです。
>> 一瞬、画面がカクカクしてしまいます。
それはなぜでしょうか。こちらでカクカクする原因を推測するには情報がちょっと足らないので、たとえば問題を確認したページを公開するとか、ブラウザによる差異はあるか、とか質問者さんのもっている情報がもう少し必要です。
>> 移動を終えるまでページを非表示にする。
カクカクさえ消えればいいのであれば、これはひとつの方法かもしれませんね。
ただ、必然的にページ全体表示が遅延するので、機能のトレードオフとも言えます。
この回答への補足
再度の回答ありがとうございます。
>これは正常な動作です。ただし、使用するPC、あるいはブラウザによってかなりの体感差があるはずです。
質問の主旨が分かりづらくて大変恐縮なのですが、これをなんとかしたい、あるいはムリならできるだけ目立たせないようにしたい、というのが今回の質問の主旨でした…。
>こちらでカクカクする原因を推測するには情報がちょっと足らないので、
画面の位置が一旦普通に表示された後移動することを、カクカクと表現しました。
わかりずらい例えで、すみません…。
>ただ、必然的にページ全体表示が遅延するので、機能のトレードオフとも言えます。
確かに、一瞬表示が遅れるのが気になるといえば気になります。
なんか他によい方法、ご存知でしたら、アドバイスお願いします。
ちなみに、質問した時点では、画像のプリロード機能とかいうのを聞いたことがあって、それがどんなものがよく分かっていないのですが、何かそんなのを使えばなんかなるんじゃないかと思ってたのですが…。
No.2
- 回答日時:
「カクカク」の状態を再現できないので、検証できていませんが…
最初に表示させないようにしておいてはいかがでしょうか?
<body onload="init()">
<script type="text/javascript">
<!--
document.body.style.visibility = "hidden";
function init(){
window.scrollTo("0","200");
document.body.style.visibility = "visible";
}
//-->
</script>
この回答への補足
回答ありがとうございました。
>「カクカク」の状態を再現できないので
画面の位置が一旦普通に表示された後移動することを、カクカクと表現しました。
わかりずらい例えで、すみません…。
一瞬表示が遅れること以外は、ほぼイメージ通りです。
他に回答がなければ、これでいこうと思います。
ありがとうございました。
No.1
- 回答日時:
JavaScriptは使用せず、ページ内リンクを使用してはどうでしょうか。
最初に表示させたい位置にある要素にIDをつけて、URLで指定するだけです。
対象ファイルをindex.htmlとして例にしてみます。
<body>
<div id="header" name="header">
header
</div>
<div id="content" name="content">
この位置を表示します。
</div>
<div id="footer" name="footer">
footer
</div>
</body>
URLをindex.html#contetに指定してアクセスすると、id=contentの要素が先頭に表示されます。name属性はなくても動作しますが、ない場合はhtmlのバージョンによって文法エラーとなります。
この回答への補足
回答ありがとうございます。
質問では省略したのですが、実は、用途としては、動的に生成させているサイト上で、画面遷移しても、そのスクロール位置を変化させない処理の一環として、用いたいのです。
そのため、できれば、ページ内リンク以外の方法でどう書けばよいか、教えていただけないでしょうか?
ページ内リンクだと、こちらで指定した位置でしか使えないですが、想定としては、ユーザーが任意の位置で画面遷移しても、そのスクロール位置を変化させないようにしたいのです。
例として、200としていますが、実際は、そこには、ユーザーがアクションを起こした時点のスクロール位置を記録して、そこへ移動させることを想定しています。
説明不足で恐縮ですが、どなたかカクカクする動作について、アドバイスよろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【java】背景画像を一定時間で...
-
クリッカブルマップで切り替え...
-
アクセスするたびに画像を変える
-
CSSでマウスオーバーした画像を...
-
jqueryを使って無駄なspanタグ...
-
ダブルクォーテーションが消え...
-
javascriptでEnterキーをtabキ...
-
ホームページの位置のずれについて
-
javascriptテキストBOX色を元に...
-
JavaScriptでサイコロのような...
-
複数の要素を表示してる時だけ...
-
jspでcssが読み込めない
-
自働生成される<div>タグに連番...
-
写真を順番にホームページ上に...
-
指定したパスが現URLに含まれて...
-
jqueryで要素の中身を要素の外...
-
ネストされたチェックボックス...
-
スライドショー「Skitter」をカ...
-
HTMLとJavaScriptで作ったタイ...
-
同一ページ内で、任意の文字列...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像削除機能を付けたい
-
1枚の画像をクリックすると複数...
-
JavaScript スライドの画像にリ...
-
透過pngの透明部分以外をクリッ...
-
1枚の画像をクリックして複数の...
-
textareaに画像を表示したい
-
WEBページ立ち上げ時に1回のみ...
-
画像をフォルダに入れれば表示...
-
Gifアニメ、最後のコマに行った...
-
Javascriptで指定した日付と時...
-
onmouseで画像の切り替えについて
-
JavaScriptとチェックボックス...
-
画像をクリックしてその地点の...
-
iframe内のリンク文字のマウス...
-
innerHTMLで、表示すると、一部...
-
オンマウスで、画像切り替え+...
-
スライドショーにコメントを入...
-
ボタンをクリックした時に、キ...
-
プルダウンの位置がwin/macでず...
-
jQuery bxSlider 画像に変更
おすすめ情報