• ベストアンサー

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

画面の表示位置を指定させて表示させたいのですが、カクカクさせずに表示させるにはどうしたらよいでしょうか？ 下記書き方だと一度普通に表示されて、それから移動するみたいで、 一瞬、画面がカクカクしてしまいます。 初めから、移動させた状態で画面を表示させるには、どうしたらよいでしょうか？ <body onload="init();"> <script type="text/javascript"> function init(){ window.scrollTo("0","200"); } </script>

  • re999
  • お礼率61% (476/777)
回答 全件
ベストアンサー
> なるべくスクロールさせたくない ANo.3で回答したとおり、一度普…
ページが表示されるまでに行われるのは、html&CSSレンダリング →…
No2です。 ＞画面の位置が一旦普通に表示された後移動することを、カ…

質問者が選んだベストアンサー

  • ベストアンサー
  • tracer
  • ベストアンサー率41% (255/621)
回答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は本題ではないので割愛します。

re999
質問者

お礼

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

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (5)

  • tracer
  • ベストアンサー率41% (255/621)
回答No.5

ページが表示されるまでに行われるのは、html&CSSレンダリング → javascript onLoad → 画像ロードの順です。 ページ内に使用しているimgタグには、height属性は指定されていますか？ この属性を指定しないと、画像が完全に読み込まれるまで画像サイズを取得できません。その結果、ページ内すべての画像が完全に読み込まれるまでページ長は決定されません。つまり、onLoadの時点ではまだページ長が決定されていないと思われます。 すべての画像にheight属性を設定すれば、画像のロード前(htmlレンダリング時)にページ長は決定されるので、もしかしたら、カクカクがなくなるかもしれません。

re999
質問者

補足

＞すべての画像にheight属性を設定すれば、画像のロード前(htmlレンダリング時)にページ長は決定されるので、もしかしたら、カクカクがなくなるかもしれません。 ありがとうございます。参考にさせていただきます。 ……すいません、今更言いづらいのですが、 質問の仕方が大変マズかったようです。 知りたかったのは、 ページ内リンクを使わずに、予め指定した画面の表示位置を(スクロールさせずに)表示させるためには、どうしたらよいか、ということなんです。 画像のプリロードって書いたのは、 javascriptだと、予め画像を読み込む処理ができるのかな？と思い、 だったら、予め、スクロール位置を指定する何かの処理がもしかしたらできるかな？ という意味で、質問しただけです。 やりたいことを整理すると、 １．予め指定した位置で表示させたい ２．なるべくスクロールさせたくない(←これ言ってなかったです、すいません) ３．スクロールしかない場合は、なるべく目立たないようにしたい １．２．が、難しいようなら、fujillinさんに教えてもらった、 スクロールさせるが、最初はhiddenにするやり方でいきたいと思います。

全文を見る
すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.4

No2です。 ＞画面の位置が一旦普通に表示された後移動することを、カクカクと表現しました。 画像のロードに時間がかかるのが、タイムラグの原因と創造されます。 連続的でないためにカクカク感じられるのであれば、いっそのこと、スクロールの動作を連続的にしてあげればカクカクには感じないかも。 とはいうものの、最終表示まではもっと時間がかかることになってしまいますが。 onloadに設定しているためにタイムラグが生じると考えられるので、画像サイズを指定しておいて、bodyの終了タグの前にスクリプトをおいてあげれば画像の読込み前に移動できるかも・・・（未検証です）

re999
質問者

補足

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

全文を見る
すると、全ての回答が全文表示されます。
  • tracer
  • ベストアンサー率41% (255/621)
回答No.3

回答にはなっていませんが、参考までに。 >> 一度普通に表示されて、それから移動する これは正常な動作です。ただし、使用するPC、あるいはブラウザによってかなりの体感差があるはずです。 >> 一瞬、画面がカクカクしてしまいます。 それはなぜでしょうか。こちらでカクカクする原因を推測するには情報がちょっと足らないので、たとえば問題を確認したページを公開するとか、ブラウザによる差異はあるか、とか質問者さんのもっている情報がもう少し必要です。 >> 移動を終えるまでページを非表示にする。 カクカクさえ消えればいいのであれば、これはひとつの方法かもしれませんね。 ただ、必然的にページ全体表示が遅延するので、機能のトレードオフとも言えます。

re999
質問者

補足

再度の回答ありがとうございます。 ＞これは正常な動作です。ただし、使用するPC、あるいはブラウザによってかなりの体感差があるはずです。 質問の主旨が分かりづらくて大変恐縮なのですが、これをなんとかしたい、あるいはムリならできるだけ目立たせないようにしたい、というのが今回の質問の主旨でした…。 ＞こちらでカクカクする原因を推測するには情報がちょっと足らないので、 画面の位置が一旦普通に表示された後移動することを、カクカクと表現しました。 わかりずらい例えで、すみません…。 ＞ただ、必然的にページ全体表示が遅延するので、機能のトレードオフとも言えます。 確かに、一瞬表示が遅れるのが気になるといえば気になります。 なんか他によい方法、ご存知でしたら、アドバイスお願いします。 ちなみに、質問した時点では、画像のプリロード機能とかいうのを聞いたことがあって、それがどんなものがよく分かっていないのですが、何かそんなのを使えばなんかなるんじゃないかと思ってたのですが…。

全文を見る
すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答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>

re999
質問者

補足

回答ありがとうございました。 ＞「カクカク」の状態を再現できないので 画面の位置が一旦普通に表示された後移動することを、カクカクと表現しました。 わかりずらい例えで、すみません…。 一瞬表示が遅れること以外は、ほぼイメージ通りです。 他に回答がなければ、これでいこうと思います。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  • tracer
  • ベストアンサー率41% (255/621)
回答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のバージョンによって文法エラーとなります。

re999
質問者

補足

回答ありがとうございます。 質問では省略したのですが、実は、用途としては、動的に生成させているサイト上で、画面遷移しても、そのスクロール位置を変化させない処理の一環として、用いたいのです。 そのため、できれば、ページ内リンク以外の方法でどう書けばよいか、教えていただけないでしょうか？ ページ内リンクだと、こちらで指定した位置でしか使えないですが、想定としては、ユーザーが任意の位置で画面遷移しても、そのスクロール位置を変化させないようにしたいのです。 例として、200としていますが、実際は、そこには、ユーザーがアクションを起こした時点のスクロール位置を記録して、そこへ移動させることを想定しています。 説明不足で恐縮ですが、どなたかカクカクする動作について、アドバイスよろしくお願いします。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • フレームページの画面サイズ設定

    トップ、メイン、アンダーって縦に３つに別れたフレームで画面サイズの設定をしたいのですが、どの様にすればよろしいでしょうか？ また、ＷＩＮとＭＡＣでサイズが違う様にしたいです。 下記まではできたのですが、ブラウザーを立ち上げてもサイズが設定できません。 <script type="text/javascript"> <!-- function test(){ if(navigator.platform=="MacPPC"){ window.resizeTo(500,500); }else{ window.resizeTo(750,600); } } //--> </script> <body bgcolor="#FFFFFF" text="#000000" onload="javascript: test();"> よろしくお願いします。

  • ページ読み込み時に自動でスクロール

    <body>にonloadを記述する方法以外で あるページを読み込んだ時に、自動的にページ最下部へ スクロールさせたいのですが 以下コードを記述してもエラーも起こらず、何も起きませんでした。 <script type="text/javascript" language="javascript"> <!-- window.onload = new function(){ window.scrollBy(0,300) }; window.onload = new function(){ alert("aaa") }; // --> </script> ちなみに、下側のalertは問題なく動作しております。 scrollby以外でのスクロールでもいいので、ご存じの方教えて下さい。 （できれば一瞬でスクロールする方がいいです。）

  • setTimeoutを使った再帰

    初めて質問させて頂きます。 setTimeoutで呼び出してるか否かと、言う違いしか無いと、言う事を思いますが、次に挙げる2つのプログラムの動作が異なる理由をどなたかお教え頂けませんか? <script type="text/javascript"> <!-- var x; function FUNCTION1(){ x = 0; FUNCTION2(x); } function FUNCTION2(x){ if ( x < 10 ) { x++; window.alert(x); FUNCTION2(x); } } //--> </script> <body onload="javascript: FUNCTION1();"> ─────────────────────────── <script type="text/javascript"> <!-- var x; function FUNCTION1(){ x = 0; FUNCTION2(x); } function FUNCTION2(x){ if ( x < 10 ) { x++; window.alert(x); setTimeout("javascript: FUNCTION2(x);", 1000); } } //--> </script> <body onload="javascript: FUNCTION1();">

  • window.onLoad について

    <body> タグに、onload=関数名・・・　と記述するとなぜかオブジェクトがありませんとかで 実行されない時があるため、 <head>タグ内に <script type="text/javascript"> 　window.onLoad=function(){ 関数名} </script> と記述してみたところ、まったく関数が動作しなくなってしまいました。 ステータスには「ページが表示されました」とでていて、スクリプトエラーにもなっていないようです。 原因がわからず、それならば・・・ htmlを順番に表示していくのだから、htmlの最後のほうに記述すればいいのでは？ と思い、 </body>の直前に <script type="text/javascript"> 関数名　　←　onloadで動作させる関数 </script> と記述してみたところ、うまく表示できました。 この記述方法って正しいのでしょうか？ 環境に依存するのか、毎回悩まされるし、毎回対処方法が違ったりしているので ホントに困っています。 アドバイスお願いします。 #何故　window.onLoad=function(){ 関数名 }　ではまったく動かなかったのでしょう。。。

  • Window.open でフレームに表示

    JAVAを使い、指定のフレームに新しい画面を表示したいのですが、要領が良く判りません。 以下のように _blank で新しいウィンドウを開くのはできます。どなたか　ご指導　お願いします。 <TITLE></TITLE> <SCRIPT language="JavaScript"> function new_window(url) { window.open(url, '_blank'); } </SCRIPT> </HEAD> <BODY onload="new_window('comp-page1.htm');">

    • ベストアンサー
    • Java
  • JavaScriptの表示についておねがいします。

    JavaScriptで、以下のスプリクトのページを表示する部分を10秒ごとにしたいのですがどなたか教えて頂けないでしょうか？出来れば、追記して回答お願いします。 <html> <body> </scr ipt> </head> <body onLoad="openWindow1()"> <a href="javascript:openWindow1();">web表示</a> <SCRIPT language="JavaScript"> <!-- // サブウィンドウの表示方法を指定する function openWindow1() { window.open("http://yahoo.co.jp/","1"); window.open("http://www.google.co.jp/","2"); window.open("http://ja.wikipedia.org/wiki/メインページ","3"); } //--> </SCRIPT> </body> </html>

  • Ajaxのウィンドウ表示位置について

    ページを開くとAjaxのウインドウが表示されるようになっています。 バックには既にサイトが表示されている状態でその上にウインドウが出てくるイメージです。 ソースは以下のようになっています。 <html> <head> <title>titletitle> <script type="text/javascript" src="js/prototype.js"> </script> <script type="text/javascript" src="js/effects.js"> </script> <script type="text/javascript" src="js/window.js"> </script> <script type="text/javascript" src="js/window_ext.js"> </script> <script type="text/javascript" src="js/debug.js"> </script> <link href="css/default.css" rel="stylesheet" type="text/css"> <link href="css/spread.css" rel="stylesheet" type="text/css"> </head> <body> <script type="text/javascript"> var win = new Window({className: "spread", title: "タイトル", top:50, left:50, width:500, height:500, zIndex: 100, url: "http://www.linkstyle33.com/", showEffectOptions: {duration:3}}) win.show(); </script> --サイトここから-- --サイトここまで-- </body> </html> top:50, left:50,で表示位置を設定することはわかるのですが ウインドウの真ん中に出したいのですがやりかたがわかりません。 試しに50%としてみたもののpx指定になっているようで表示すらされませんでした。 サイトがバックにある状態でウインドウを出したいのでiframe以外で ウインドウを真ん中に表示する方法はあるのでしょうか？

  • イベント編集による画像表示位置

    HPBでWebを編集する中でサムネイル画像を[イベント編集]で別ウインドウに表示させていますが、画像の表示位置を固定して設定するタグの書き方が判りません。下記のどの部分にどのように書き込めば良いのかお教えいただきたくお願いします。尚、OSは、Windows7です。 <script language="JavaScript"> <!--HPB_SCRIPT_CODE_40 function _HpbJumpURLinNewWindow(url) { if (url != '') { window.open(url, '_blank','width=450,height=670'); } } //--> </script> <script type="text/javascript" language="JavaScript"> <!--HPB_SCRIPT_CODE_40 function _HpbJumpURL(url) { if (url != '') { window.location = url; } } //--> </script>

  • 新規ウィンドウを全画面表示させたい

    head内に下記を入力し、 <script type="text/javascript"> <!-- function setScreenSize() { window.moveTo(0,0); window.resizeTo(window.screen.availWidth, window.screen.availHeight); } //--> </script> body内に下記を記載しました。 <a href="test.htm" onclick="setScreenSize()">test</a> 「test.htm」を新規ウィンドウで開きたいのですが、同じウィンドウで開いてしまいます。何が足りないのか分かりません。教えていただけませんでしょうか？

  • 現在時刻を表示させたい！

    JavaScriptで、画面上に現在の時刻を表示させたいのですが、 <HEAD> <script type="text/javascript"> <!-- function jikoku() { dd = new Date(); document.F1.T1.value = dd.toLocaleString(); window.setTimeout("jikoku()", 1000); } // --> </script> </HEAD> <BODY onload="jikoku()"> <form name="F1" action="#"> <input type="text" name="T1" size=50> </form> </BODY> </HTML> とタグを打つと、「西暦/月/日にち/曜日/時刻/～」 と細かく出てきてしまいます。 ほんとうは、時刻以下、曜日から西暦までは必要ないんです。 現在時刻のみ（23:25:31)といった具合に×時×分×秒 の部分だけ表示させたいんです。 どうしたらいいか、教えてください。 お願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する