画面の表示位置を指定させて表示させたいのですが、カクカクさせずに表示させるにはどうしたらよいでしょうか?
下記書き方だと一度普通に表示されて、それから移動するみたいで、
一瞬、画面がカクカクしてしまいます。
初めから、移動させた状態で画面を表示させるには、どうしたらよいでしょうか?
<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で質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript WordPressのコンタクトフォーム7にて送信者の位置情報を送らせたい 2 2022/09/14 23:28
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- アプリ スマホ画面のホーム位置にカメラアプリを表示させるには 1 2022/11/07 06:26
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- その他(パソコン・スマホ・電化製品) CMD等でPC操作(excel開く等)を自動化させたい 1 2023/03/15 09:53
- デスクトップパソコン パソコン マルチスクリーン 3画面 全画面表示で動画を楽しみたい。 2 2023/07/21 08:40
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像の上に画像リンクを貼る方法
-
スライダーを実装した場合、ペ...
-
画面の表示位置を指定させて表...
-
オンマウスで、画像切り替え+...
-
残像を残しながらjpg画像を自動...
-
JAVASCRIPTでアクセス毎に画像...
-
画像クリック→メッセージボック...
-
「画像の上を流れる文字列」を...
-
小窓について教えて下さい。
-
MAX関数を使ってからLEFT JOIN...
-
htmlの記述で link rel=styles...
-
背景色を一定時間ごとにランダ...
-
文字を固定したいのですが…
-
javascriptでURLにマウスオーバー
-
[急ぎ] videoタグで埋め込んだm...
-
文字と数字が混在する要素のsor...
-
離れた場所にマウスオーバーで...
-
ホームページビルダー15 メニュ...
-
c++std::string型をTCHARに変換...
-
タブで開いてさらにタブ内をア...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
JavaScript スライドの画像にリ...
-
1枚の画像をクリックして複数の...
-
HTMLで条件分岐はできますか?
-
Javascript で共通の処理をどこ...
-
Gifアニメ、最後のコマに行った...
-
JavaScriptとチェックボックス...
-
画像の重なりの順序を代える方...
-
画像ランダム表示、しかしダブ...
-
javascriptで毎月替わる画像
-
1枚の画像をクリックすると複数...
-
オンマウスで、画像切り替え+...
-
透過pngの透明部分以外をクリッ...
-
Javascriptで指定した日付と時...
-
jQueryスライドショー画像への...
-
JavaScript で flexslider の画...
-
lightbox2をiframeから外に表示...
-
重なった画像にクリックイベン...
-
Twitterの埋め込みしたWebペー...
-
画像をフォルダに入れれば表示...
おすすめ情報