画面の表示位置を指定させて表示させたいのですが、カクカクさせずに表示させるにはどうしたらよいでしょうか?
下記書き方だと一度普通に表示されて、それから移動するみたいで、
一瞬、画面がカクカクしてしまいます。
初めから、移動させた状態で画面を表示させるには、どうしたらよいでしょうか?
<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を探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スワップイメージが上手く動作...
-
透過pngの透明部分以外をクリッ...
-
画像のプリロード
-
大画像の上の右上に小画像を表...
-
textareaに画像を表示したい
-
初心者です。クリッカブルマッ...
-
Gifアニメ、最後のコマに行った...
-
サムネイルをマウスオーバーで...
-
画面の表示位置を指定させて表...
-
Twitterの埋め込みしたWebペー...
-
マウスオーバー時の音楽再生
-
外にある中心で画像を回転させ...
-
MAX関数を使ってからLEFT JOIN...
-
スクロール可能なチェックボックス
-
OpenCVで固定枠で画像を操作す...
-
JavaScript - 月ごとに画像変化
-
createElementで作成した要素を...
-
HPで写真をクリックすると次の...
-
関数の引数を動的に変えたい
-
VideoBoxのカスタマイズ
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
JavaScript スライドの画像にリ...
-
bxsliderにて読み込み後に内容...
-
透過pngの透明部分以外をクリッ...
-
JavaScriptとチェックボックス...
-
クリッカブルマップの一部分だ...
-
innerHTMLで、表示すると、一部...
-
Javascriptで指定した日付と時...
-
画像をフォルダに入れれば表示...
-
1枚の画像をクリックすると複数...
-
WEBページ立ち上げ時に1回のみ...
-
image.onload = .. の後に imag...
-
美人時計風JAVAスクリプトが上...
-
曜日と時間を指定して表示画像...
-
決まった曜日で一定時間だけ表...
-
画面の表示位置を指定させて表...
-
jQuery FlexSliderのカルーセ...
-
特定の画像を非表示にする方法
-
iframe内のリンク文字のマウス...
おすすめ情報