Search
Calendar
     12
3456789
10111213141516
17181920212223
24252627282930
31      
<< March 2024 >>
Sponsored links
COUNTER 2005/08/19
Total

Unique
あなたのブログのお値段は?
GoogleAdSense
なかのひと
New Entries
Recent Comment
Recent Trackback
Category
Archives
Profile
Links
mobile
qrcode
RSSATOM 無料ブログ作成サービス JUGEM
スポンサーサイト

一定期間更新がないため広告を表示しています

posted by: スポンサードリンク | - | | - | - |
jQuery の empty() メソッドが遅い

// html
<div id="search_result">
    <table>
        <tr><td>hoge1</td></tr>
        <tr><td>hoge2</td></tr>
        <tr><td>hoge3</td></tr>
        <!-- こんな感じでいっぱい行があるよ -->
    </table>
</div>


// Javascript
$('#search_result').empty();

jQuery で大量のDOMオブジェクトを削除すると異常に時間がかかる。
650行ほどのデータを削除すると30秒とかかかるんですが・・。
jQuery は 1.3.2 を使用。


// Javascript
$('#search_result').remove();

empty() は子要素を削除するので遅いのかと思って remove() に変えてみる。
remove() は自分ごと削除。
それでも全然早くならない。


 

// Javascript
$('#search_result').html('');

削除が遅いなら html() で直接中身を書き換えてやろう。
やっぱり早くならない。


 

// Javascript
$('#search_result')[0].innerHTML = '';

ぬぬぬ、じゃあ DOMオブジェクト のinnerHTML を直接書き換えてやろう。
やったー!
一瞬で終わったよ!

$('#search_result') ここまでは jQuery なのに早くなるのか。
よくわからん。。。

 

 

この問題は jQuery1.4 では解決されてるみたいだすよ。
速度の比較 をみたら変わりすぎてて笑った。

posted by: Diz | web開発 | 00:01 | comments(0) | - |
コールバック関数が複数回呼ばれてしまう問題

 特定の処理を行う度に、処理が何回も行われる出来事に遭遇したので調査。
ボタンを押すと1回処理が走る
もう1回ボタンを押すと2回処理が走る
もう1回ボタンを押すと3回処理が走る
 :
 :
増えとるがなΣ( ̄□ ̄;)

$('#btn').click(function test() {
    alert('a');
});

$('#btn').click(function test() {
    alert('b');
});

$('#btn').click();

    →実行結果
    → a を表示
    → b を表示


イベントに設定したコールバック関数って追加されていくのね。
勝手に上書きだと思ってた。


 

$('#btn').bind('click', function test() {
    alert('a');
});

$('#btn').unbind('click');

$('#btn').bind('click', function test() {
    alert('b');
});

$('#btn').click();

    →実行結果
    → b を表示


bind() を使用してコールバック関数を設定すれば unbind() で削除できる。


使いたいイベントに対応してるなら bind() と unbind() より live() と die() が素敵かも。
jQuery 1.3 では live() は以下のイベントに非対応。
blur, focus, mouseenter, mouseleave, change, submit

posted by: Diz | web開発 | 00:01 | comments(0) | - |
Javascript で enctype を動的に指定できない

 ページ遷移なしのファイルアップロードを実装しようとして
enctype の指定ではまった。
後付じゃだめなのね・・。


×これじゃだめ

$(form).attr('enctype', 'multipart/form-data');


○真面目に書きなさいって事ね

<form name="formName" id="formId" method="post" enctype="multipart/form-data"></form>


共通機能を作ってたので一緒にやっちゃおうと思ったけど
真面目に書くに限るね。

posted by: Diz | web開発 | 00:01 | comments(0) | - |
IETester

前回書いた Multiple IE が全然役に立たなかった。
テキストボックスにフォーカスが合わないとか謎すぎる。

ちょっと調べたら IE8 を入れると動作しなくなるっぽい。
IE6,7,8の共存で発生した問題



で、別のツールを Juno に教えてもらったのでメモ。
IETerter

これは、ちゃんと動作した!
ううむ、便利。

こっちのツールの方がよさそうね(*´Д`*)

posted by: Diz | web開発 | 01:33 | comments(0) | - |
IE では setAttribute() で class 設定ができない

前回 で createElement("table") が動作しないのは解決した。
今度は css が反映されない。

コードはこんな感じ。

/**** javascript ****/
var tr = document.createElement("tr");
tr.setAttribute("class", "name");

/**** css ****/
.name td {
  background-color: #ebf6bc;
  color: #669933;
  padding: 4px auto;
}

調べてみると IE では setAttribute() で class の設定ができないらしい。

/**** javascript ****/
tr = document.createElement("tr");
// classNameプロパティ を使用
tr.className = "name";

これで動いたよ。

posted by: Diz | web開発 | 08:26 | comments(2) | - |
IE でcreateElement("table")する時の注意

 また IE がちゃんと動いてくれない。

createElement() を使って tableタグ を生成する場合の注意。

javascript で tableタグ を生成する場合、こんなコードになると思う。

var table = createElement("table");

var tr = document.createElement( "tr" );
table.appendChild( tr );

var td    = document.createElement( "td" );
td.innerHTML = "ほげほげ";
tr.appendChild( td );

firefox では動くんだけど IE では動かない。
デバッグして table.innerHTML を調べてみてもちゃんと意図どおりの HTML が入ってる。

調べてみると IE は tbodyタグ をつけないとダメらしい。

var table = createElement("table");

// tbody を追加
var tbody = document.createElement("tbody");
table.appendChild(tbody);

var tr = document.createElement("tr");
table.appendChild(tr);

var td = document.createElement("td");
td.innerHTML = "ほげほげ";
tr.appendChild( td );


これで動いたよん。

posted by: Diz | web開発 | 01:45 | comments(2) | - |
IE で挙動不審な getElementsByName 対策
IE の getElementsByName() についてメモ。

<span name="hoge">
から
var hoge = getElementsByName();
が取得できない。
調べてみると IE では getElementsByName() の挙動がおかしく
span の要素は取得しないらしい。

その反面 id 要素を取得してくるらしいので
<span id="hoge" name="hoge">
こうやると動くらしい。


なんじゃそら。
名前で属性を取得するよ!ってメソッド名なのに
name は取得しなくて id は取得するのか。

謎過ぎる。




最近、web開発にちょっと慣れてきた。
IE を疑うとだいたい解決する(;´ρ`)
posted by: Diz | web開発 | 19:36 | comments(4) | - |
mixiアプリで透過pngを使用する

mixiアプリに透過pngを実装したくて苦労した話。

IE6以前では、透過pngがサポートされてないので
IE PNG FIX を使いIE6以前もサポートする事にした。

テストは Multiple IE を使うことに。
IE8 と IE6は共存できないが
Multiple IE をインストールするだけでIE6以前が全て仕様できる優れもの。

Multiple IE と IE PNG FIX については
以前の日記 を参照。



IE PNG FIX 実装したのでテストしようとすると
mixiにログインできない。
なにこれ。
テキストボックスにIDとPASSが入力できない。

仕方ないのでIE8をアンインストール。
IE6sp3でテスト。



IE PNG FIX 効いてないんだけど。
透過してない。
そもそも htc ファイルが呼び出せてないぽい。
mixiアプリは htc 非対応って事??
どうもダメそうなので、別の方法で透過pngを実現する事に。



調べると DD_belatedPNG が良さそう。
Javascript単体で透過を実現してくれるみたい。
ライセンスも MIT で使いやすい。
実装も超簡単だった。

実装は ここ を参考にさせてもらいました。
DD_belatedPNG のダウンロードは ここ



ただ、1つだけ問題があった。
透過したpngのサイズを変更できないみたい。
HTML や CSS の width や height で表示サイズが変わらない。
DD_belatedPNG はまだバージョンが 0.08a なので今後に期待か。



mixiアプリの透過png対応は、想像以上に苦労したけど
なんとか対応できた。
よかったよかった。



Multiple IE と IE PNG FIX も通常の www ならちゃんと動作してました。
通常の開発では強力なツールだと思います(´∀`)

posted by: Diz | web開発 | 02:11 | comments(0) | - |
透過pngとテスト環境

ブログでは、仕事や技術の事は書かないようにしてたんだけど
ちょっとメモ。

レインボーフラワー で
pngのアルファチャンネルに対応したかったので調べてみた。


pngのアルファチャンネルは
IE6以前では非対応らしい。


1. テスト環境構築
mixiユーザが、どの程度IE6以前のブラウザを使っているかわからないけど
対応しといた方がいい気がする。

IE6 SP1 を入れようとするが IE8 と共存できないっぽい。

調べてみると Multiple IE というものを発見。
過去のIEをいっぱいインストールしてくれる。
たぶん、大丈夫そうかな?

このサイト を参考にさせてもらいました。


2. IE6以前のアルファチャンネルpng対応
方法はいろんなものがあるみたいなんだけど

IE PNG FIX ってのを使わせてもらいました。
一番簡単そうだったから!

透過される原理は、あんまりよくわかってません(笑)

実装は このサイト を参考にさせてもらいました。



これでかつる!

posted by: Diz | web開発 | 00:01 | comments(2) | - |