チェックボックスクリックで内容を変化させたい。

Question

現在実現出来てはいるのですが動作に満足できていない状況です。
改善点があるかお聞きしたいと思っています。

head部分に下記コードを埋めてあります。

<script type="text/javascript">
window.onload = function(){
    window.scrollTo(0,<?php $scl;?>);
}
</script>
<script type="text/javascript">
$(function(){
	$(window).scroll(function () {
		var ScrTop = $(document).scrollTop();
		$('#intervalValue').val(ScrTop);
	});
});
</script>

formは下記のようになっています。

<form method="post" action="index.php" name="form">
<input type="hidden" name="scl" value="0" id="intervalValue">
<input type="checkbox" name="data" value="2" onClick="document.form.submit();"/>
</form> 

チェックボックスをクリックするとsclとdataが飛びます。
dataはMYSQLからデータを引っ張る数字です。
sclは下記にpostされて入ります。

window.scrollTo(0,<?php $scl;?>);

これを行うと商品一覧がかわり、スクロール量を取得しているので
一番上からスタートではなく、現在いるスクロール位置から
スタートになります。

困っているのは読込速度が遅いのか
記述が悪いのか、チェックボックスをクリックすると
一瞬一番上のヘッダー部分がチラッと見えてからスクロール位置が
表示されます。このチラッと一瞬読込が見えるのがバグみたいに見えます。

サーバの速度が遅いと言われてしまったらそれまでなのですが
何か良い方法などありますでしょうか？
現在ソース上に外部からの読込などは一切ありません。

何かご提案だけでもいいので
お気づきの点などございましたらご回答頂けますと嬉しいです。

よろしくお願い致します。

Answer 1

一瞬一番上のヘッダー部分がチラッと見えてからスクロール位置が
表示されます。このチラッと一瞬読込が見えるのがバグみたいに見えます。

JSでの強制スクロールなんてそんなものです。ページを全部表示しないとスクロールが機能しませんし、ページを全部表示するということはちらつきが発生するのは避けられません。そんなものだと諦めましょう。

どうしても気にするのであれば、チェックボックスを押した時にページを読み込み直すのではなく、非同期通信でデータを取得し、JSで画面の中身を書き換えるようにしたらどうでしょうか。そうした方がちらつきも最小限で済みます。

Comments

[extliger]

やはり非同期通信しかないですか。貴重なご意見ありがとうございます！