2

私のWebアプリには、次のように非表示のスパンが埋め込まれている多くの（場合によっては100年代の）セルがあります。

<td class='providerInfo' tabindex=0>
    FIRE DEPARTMENT
    <span class='HIDDEN'>
        Address: New York, NY<br />
        Phone: 123-456-7890<br />
        Type: Facility
    </span>
</td>

ページの読み込み時に、qTipを非表示のスパンに関連付けて、情報のあるセルにフォーカスしたときに表示します。

function loadProviderInfo() {

    $(document).ready(function() {
        $('.providerInfo').each(function() {
            $(this).qtip({
                content: {
                    text: function(api) { return $(this).children(".HIDDEN").html(); }
                },
                style: {
                    classes: 'ui-tooltip-blue',
                    def: 'false'
                },
                position: {
                    my: 'bottom left',  // Position my bottom left...
                    at: 'top right', // at the top right of...
                    target: $(this) // my target
                }
            });

            $(this).focusin(function() { $(this).qtip('toggle', true); });
            $(this).focusout(function() { $(this).qtip('toggle', false); });        
        });
    });
}

qTipは見た目は良いですが、表示と非表示が非常に遅くなっています。

qTipの表示と非表示を高速化する方法についてのアイデアはありますか？qTipに遅延がなくても大丈夫です。

IE8で動作する必要があります。

編集1
セルが少ないほど、qTipsの表示が速くなります。

4

3 に答える 3

2

ドキュメントをチェックする

hide: { delay: 1000 }

1000 ミリ秒 (1 秒)

于 2012-05-16T05:49:08.213 に答える
1

問題は、.eachループ、およびすべてのイベントリスナー（より多くのオーバーヘッド）で発生する可能性があります。

すべての.providerInfo要素をqTipし、mouseoverとmouseleaveにqTipsビルドインイベントを使用しないのはなぜですか？

function loadProviderInfo() {

    $(document).ready(function() {

        $('.providerInfo').qtip({
                content: {
                    text: function(api) { return $(this).children(".HIDDEN").html(); }
                },
                style: {
                    classes: 'ui-tooltip-blue',
                    def: 'false'
                },
                position: {
                    my: 'bottom left',  // Position my bottom left...
                    at: 'top right', // at the top right of...
                    target: $(this) // my target
                },
                show: {
                    event: 'mouseenter',
                    target: $(this)
                },
                hide: {
                    event: 'mouseleave',
                    target: $(this)
                }
            });


    });
}

私はこのコードをテストしませんでした-私はあなたのためにJSFiddleを実行するつもりでしたが、qTipに正しく含めることができませんでした。試してみて、速度が上がるかどうかを確認してください。

于 2012-05-09T20:16:52.877 に答える
1

qTipプラグインよりもイベントリスナーに関連していると思います（間違っている可能性があります）。

私の最初の考えは、イベントを別の方法でバインドしようとすることです。.on()リスナーをバインドするjQuery の新しい方法を試してみませんか? リスナーを$.eachループから取り出し、後で次のように追加します。

$('table').on('focusin focusout', '.providerInfo', function(e){
    if(e.type == 'focusin'){
        $(this).qtip('toggle', true);
    }else{
        $(this).qtip('toggle', false);
    }
});

明らかに、複数のテーブルがある場合は、問題のテーブルの対応するクラスまたは ID を使用してください。

多くのテーブル セルがある場合 (数が多ければ多いほど速度が低下するため、そのように聞こえるように)、これにより負荷が大幅に軽減され、多くのイベントではなく 1 つのイベントがバインドされます。

編集これはjQuery 1.7+でのみ機能するため、以前のバージョンを使用している場合.delegate()は、同様の方法で使用することをお勧めします.

于 2012-05-09T20:04:50.160 に答える