ちらつきの防止

[新着] Webテンプレートを仮オープンしました

0   名前： himayuzu ： 2007/07/25（水） 21:38  ID:7/3qUbTz sub-ZV
いつもお世話になっています。

リストボックスに1000件のデータがあったとして
その1000件のデータを上から順にselected状態にした場合
スクロールが発生し、リストボックスの描画がちらついて
しまいます。このちらつきをなくす方法は無いでしょうか？
よろしくお願いします。

(例)
for (i=0; i<1000; i++) {
　　op[i].selected = true;
}





1   名前： 匿名 ： 2007/07/25（水） 21:38  ID:2Rq6b0vp sub-Cz
そのコードで何を検証すれば良いのでしょうか。
2   名前： himayuzu ： 2007/07/25（水） 21:38  ID:7/3qUbTz sub-ZV
すいません。はしょりすぎました。

下記の例だとデータ量が少なすぎてちらつきが
いまいち分かりませんが、データ量が増えた場合の
ちらつきを抑えたいです。

(例)
<HTML>
<script LANGUAGE="JavaScript">
<!--
function SelectList(){
for (i=0; i<30; i++) {
document.form.test.options[i].selected = true;
}
}
//-->
</script>
<BODY>
<FORM name="form">
<select name="test" size="10" multiple style="width:400">
<option value="test1">test1
<option value="test2">test2
<option value="test3">test3
<option value="test4">test4
<option value="test5">test5
<option value="test6">test6
<option value="test7">test7
<option value="test8">test8
<option value="test9">test9
<option value="test10">test10
<option value="test11">test11
<option value="test12">test12
<option value="test13">test13
<option value="test14">test14
<option value="test15">test15
<option value="test16">test16
<option value="test17">test17
<option value="test18">test18
<option value="test19">test19
<option value="test20">test20
<option value="test21">test21
<option value="test22">test22
<option value="test23">test23
<option value="test24">test24
<option value="test25">test25
<option value="test26">test26
<option value="test27">test27
<option value="test28">test28
<option value="test29">test29
<option value="test30">test30
<input name="button" type="button" value="選択" onclick="javascript:SelectList();"></td>
</FORM>
</BODY>
</HTML>
3   名前： 匿名 ： 2007/07/25（水） 21:38  ID:epW2eUw6 sub-8t
かえってちらつきますかね？
function SelectList(){
    var oldNode = document.getElementsByName('test')[0];
    var newNode = oldNode.cloneNode(true);
    for (var i = newNode.options.length; i--;) {
        newNode.options[i].selected = true;
    }
    oldNode.parentNode.replaceChild(newNode, oldNode);
}
4   名前： Chips ： 2007/07/25（水） 21:38  ID:iXTrKUp6 sub-FV
試してないけど、書き換えでちらつくならループの最中は消しとく。とか？
〜 style.visibility = 'hidden';
〜ちらつくループ〜
〜 style.visibility = 'visible';
5   名前： himayuzu ： 2007/07/25（水） 21:38  ID:7/3qUbTz sub-ZV
皆様ご回答ありがとうございます。

>function SelectList(){
> var oldNode = document.getElementsByName('test')[0];
> var newNode = oldNode.cloneNode(true);
> for (var i = newNode.options.length; i--;) {
> newNode.options[i].selected = true;
> }
> oldNode.parentNode.replaceChild(newNode, oldNode);
>}
ほとんどちらつきません。replaceChildで若干ちらつくのかなー
という程度で、全く問題無いです。ありがとうございました。

Chipsさん>どのオブジェクトに適用するのか分からなかったので
下記のパターンを試して見ましたがうまく行きませんでした。
リストボックスにはstyle.visibility使用出来ないのでしょうか？

document.form.test.options[i].style.visibility = 'hidden';
document.form.test.style.visibility = 'hidden';
document.form.style.visibility = 'hidden';
〜ちらつくループ〜
document.form.test.options[i].style.visibility = 'visible';
document.form.test.style.visibility = 'visible';
document.form.style.visibility = 'visible';



6   名前： Chips ： 2007/07/25（水） 21:38  ID:iXTrKUp6 sub-FV
option個別には意味ないと思うし、
form全体まで消さなくていいと思うので
selectに適用すればいいんじゃないでしょうか？
<html>
<head>
<title></title>
<script type="text/javascript">
function SelectList(){
	var Sel = document.getElementById('test');
	Sel.style.visibility = 'hidden';
	for(var i=0;i<Sel.options.length;i++)
		Sel.options[i].selected = true;
	Sel.style.visibility = 'visible';
}
</script>
</head>
<body>
<form>
<select id="test" size="10" multiple style="width:400px">
<script type="text/javascript">
for(var i=0;i<1000;i++)
 document.write('<option value="test'+i+'">test'+i+'<'+'/option>');
</script>
</select>
<input type="button" value="選択" onclick="SelectList()">
</form>
</body>
</html>
7   名前： 匿名 ： 2007/07/25（水） 21:38  ID:jSC9zi.K sub-y9
>>4, >>6
どうしてWindowsなのにIEで試そうとしないのか。
それらの方法では残念な思いをすることになる。

http://www.microsoft.com/japan/msdn/columns/dude/dude02262001.aspx
時間がかかる操作中に表示を更新する
8   名前： himayuzu ： 2007/07/25（水） 21:38  ID:7/3qUbTz sub-ZV
皆様ご回答ありがとうございます。

Chipsさん>試してみましたが、やはりちらつくようです。
style.visibilityを使用しても変化はありませんでした。

>>3さんのご教授頂いた内容を参考にさせて頂きたいと思います。
皆様、いろいろありがとうございました。



9   名前： Chips ： 2007/07/25（水） 21:38  ID:iXTrKUp6 sub-FV
変化なしですか…
マシンの性能・状態でかなり違いがあるのでしょうね。
元々私の環境では対処しなくても（描画の更新があるぶんおっせーなぁとは思ったけど）ちらつきは確認できない状態でした。

>>7
そんな訳でしっかりIEでも試してはいますよ。
残念な思いをする事まで想定できなかったのは未熟さでしょうけど。

で、さぼっていたOperaでも試したらこっちはホントに残念な結果に。Operaのバグでしょうけどvisibleに戻しても描画内容が更新されていないので全選択が完了されたかどうかわからない状態に陥ってました。（トホホ）
10   名前： himayuzu ： 2007/07/25（水） 21:38  ID:7/3qUbTz sub-ZV
すいません。ありがとうございましたと言っておきながら
また、続きで質問させて下さい。(ちらつきの質問からそれる事をお許し下さい。)

>>3さん
1000件のデータがあったとして700件から800件のデータ
のみをselectedにしたい場合、>>3さんにご教授頂いた
やり方だとスクロールバーの位置が常にトップにきます。
そこでoldNode.parentNode.replaceChild(newNode, oldNode);
の後にdocument.form.test.selectedIndex = 700;
を試しに入れてみたのですが、スクロールが発生しません。
通常selectedIndexで指定した位置にスクロールが行われる
と認識しているのですが、どうしてスクロールしないのか
が分かりません。原因が分かればご教授頂けないでしょうか？
一覧へ戻る