1


0

ツールチップのパフォーマンスを改善しましたが、IE7またはIE6のjqueryおよびインラインスタイルでは機能しなくなりました

テキスト付きのDIVをページに追加するツールチップを作成しました。

私はそれを私が望む位置に表示させ、マウスが動くのを追跡することができました。

以前はインラインスタイルでこれを行い、上部の左の絶対位置座標を動的にインラインで更新していました。

これはパフォーマンスの問題を引き起こすようですので、動的なスタイリングを「

1 Answer


2


どこから始めればよいかわからないので、http://jsfiddle.net/5YKNS/1/ [私の変更]についてはどうでしょうか? ご覧のとおり、Internet Explorerで正常に動作するようになりました。 各変更の説明:

  • Internet Explorerでは、スタイルシートの最大数(31または32、I そして、mousemoveイベントで、新しい `` +要素を頭に追加していました。 制限に達すると、ツールチップは二度と動きません。 _css()_に戻しました。

  • 要素にマウスオーバーするたびに、新しいmousemoveをアタッチします イベント ここでの問題は、このハンドラーのバインドを解除しないため、マウスをオフにすると、マウスをオンにするたびに新しいハンドラーがアタッチされ、実行中の作業が2倍になり、ブラウザーにストレスがかかります(IEが悪い!)。 _mouseover_ハンドラーを独自のスペースに移動し、一度だけ作成してアタッチします。

  • マウスオーバーするたびにツールチップが作成され、マウスオフでデタッチします it. 最初にDOMに含めると、_hide()_と_show()_になります。

  • セレクターや変数のキャッシングは一切行いません。 毎回 `$( '#tooltip')`と書くと、追加の検索になります。 `$( '#tooltip')`の結果を変数に保存し、変数を使用します。

`$( '#tooltip')`をキャッシュする作業をいくつか行いましたが、 `$(this)`に対しても同じことを行う必要があります。 _mousemove_はかなりストレスの多いイベントであり、数ミリ秒以内に何度も呼び出すことができます。 これにより、スクリプトが完了するまで待機するため、レンダリングが遅くなります。