重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

画面の表示位置を指定させて表示させたいのですが、カクカクさせずに表示さ

解決済

  • 質問者：re999
  • 質問日時：
  • 回答数：6件

画面の表示位置を指定させて表示させたいのですが、カクカクさせずに表示させるにはどうしたらよいでしょうか？

下記書き方だと一度普通に表示されて、それから移動するみたいで、
一瞬、画面がカクカクしてしまいます。

初めから、移動させた状態で画面を表示させるには、どうしたらよいでしょうか？

<body onload="init();">
<script type="text/javascript">
function init(){
window.scrollTo("0","200");
}
</script>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.6ベストアンサー

  • 回答者： tracer
  • 回答日時：

> なるべくスクロールさせたくない


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は本題ではないので割愛します。
    • good
    • 1
    • 件
通報する
この回答へのお礼

貴重な時間を割いて、お付き合いいただき、ありがとうございました。
大変参考になりました！

通報する
お礼日時：2010/10/21 20:10

No.5

  • 回答者： tracer
  • 回答日時：

ページが表示されるまでに行われるのは、html&CSSレンダリング → javascript onLoad → 画像ロードの順です。



ページ内に使用しているimgタグには、height属性は指定されていますか？
この属性を指定しないと、画像が完全に読み込まれるまで画像サイズを取得できません。その結果、ページ内すべての画像が完全に読み込まれるまでページ長は決定されません。つまり、onLoadの時点ではまだページ長が決定されていないと思われます。

すべての画像にheight属性を設定すれば、画像のロード前(htmlレンダリング時)にページ長は決定されるので、もしかしたら、カクカクがなくなるかもしれません。

この回答への補足

＞すべての画像にheight属性を設定すれば、画像のロード前(htmlレンダリング時)にページ長は決定されるので、もしかしたら、カクカクがなくなるかもしれません。
ありがとうございます。参考にさせていただきます。


……すいません、今更言いづらいのですが、
質問の仕方が大変マズかったようです。

知りたかったのは、
ページ内リンクを使わずに、予め指定した画面の表示位置を(スクロールさせずに)表示させるためには、どうしたらよいか、ということなんです。

画像のプリロードって書いたのは、
javascriptだと、予め画像を読み込む処理ができるのかな？と思い、
だったら、予め、スクロール位置を指定する何かの処理がもしかしたらできるかな？ という意味で、質問しただけです。

やりたいことを整理すると、
１．予め指定した位置で表示させたい
２．なるべくスクロールさせたくない(←これ言ってなかったです、すいません)
３．スクロールしかない場合は、なるべく目立たないようにしたい

１．２．が、難しいようなら、fujillinさんに教えてもらった、
スクロールさせるが、最初はhiddenにするやり方でいきたいと思います。

補足日時：2010/10/20 00:24
通報する
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： fujillin
  • 回答日時：

No2です。



＞画面の位置が一旦普通に表示された後移動することを、カクカクと表現しました。
画像のロードに時間がかかるのが、タイムラグの原因と創造されます。

連続的でないためにカクカク感じられるのであれば、いっそのこと、スクロールの動作を連続的にしてあげればカクカクには感じないかも。
とはいうものの、最終表示まではもっと時間がかかることになってしまいますが。


onloadに設定しているためにタイムラグが生じると考えられるので、画像サイズを指定しておいて、bodyの終了タグの前にスクリプトをおいてあげれば画像の読込み前に移動できるかも・・・（未検証です）

この回答への補足

すいません、質問の仕方が大変マズかったようです。
画像のプリロードとか書いた意味がコトバ足らずでした。

補足日時：2010/10/20 00:21
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： tracer
  • 回答日時：

回答にはなっていませんが、参考までに。




>> 一度普通に表示されて、それから移動する
これは正常な動作です。ただし、使用するPC、あるいはブラウザによってかなりの体感差があるはずです。

>> 一瞬、画面がカクカクしてしまいます。
それはなぜでしょうか。こちらでカクカクする原因を推測するには情報がちょっと足らないので、たとえば問題を確認したページを公開するとか、ブラウザによる差異はあるか、とか質問者さんのもっている情報がもう少し必要です。


>> 移動を終えるまでページを非表示にする。
カクカクさえ消えればいいのであれば、これはひとつの方法かもしれませんね。
ただ、必然的にページ全体表示が遅延するので、機能のトレードオフとも言えます。

この回答への補足

再度の回答ありがとうございます。

＞これは正常な動作です。ただし、使用するPC、あるいはブラウザによってかなりの体感差があるはずです。
質問の主旨が分かりづらくて大変恐縮なのですが、これをなんとかしたい、あるいはムリならできるだけ目立たせないようにしたい、というのが今回の質問の主旨でした…。

＞こちらでカクカクする原因を推測するには情報がちょっと足らないので、
画面の位置が一旦普通に表示された後移動することを、カクカクと表現しました。
わかりずらい例えで、すみません…。

＞ただ、必然的にページ全体表示が遅延するので、機能のトレードオフとも言えます。
確かに、一瞬表示が遅れるのが気になるといえば気になります。
なんか他によい方法、ご存知でしたら、アドバイスお願いします。
ちなみに、質問した時点では、画像のプリロード機能とかいうのを聞いたことがあって、それがどんなものがよく分かっていないのですが、何かそんなのを使えばなんかなるんじゃないかと思ってたのですが…。

補足日時：2010/10/19 21:20
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： fujillin
  • 回答日時：

「カクカク」の状態を再現できないので、検証できていませんが…


最初に表示させないようにしておいてはいかがでしょうか？


<body onload="init()">
<script type="text/javascript">
<!--
document.body.style.visibility = "hidden";
function init(){
window.scrollTo("0","200");
document.body.style.visibility = "visible";
}
//-->
</script>

この回答への補足

回答ありがとうございました。

＞「カクカク」の状態を再現できないので
画面の位置が一旦普通に表示された後移動することを、カクカクと表現しました。
わかりずらい例えで、すみません…。

一瞬表示が遅れること以外は、ほぼイメージ通りです。
他に回答がなければ、これでいこうと思います。
ありがとうございました。

補足日時：2010/10/19 21:13
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： tracer
  • 回答日時：

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としていますが、実際は、そこには、ユーザーがアクションを起こした時点のスクロール位置を記録して、そこへ移動させることを想定しています。

説明不足で恐縮ですが、どなたかカクカクする動作について、アドバイスよろしくお願いします。

補足日時：2010/10/19 00:42
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報