6

私はjavascript、jQuery、またはプラグインの経験はあまりありませんが、通常は管理しています。とにかく、私のクライアントはサイトを構築しており、その目的の 1 つは、さまざまなサイトからニュース記事をピックアップし、タイトルを順不同の html リストに表示することです。私は彼のコードにアクセスできません。ニュース記事の読み込みがかなり遅くなります (サイトが読み込まれた後)。

私は qTIP を使用しています。アイデアは、ニュース タイトルにカーソルを合わせると、ツールヒントが生成されるというものです。どこからも生成されていないダミーのタイトルがあるため、これは私の開発環境では正常に機能します。

問題は、クライアントがテスト環境でサイトをセットアップすると、ニュース タイトルをリストにロードするスクリプトが非常に遅くなり、リストに要素が存在する前に qTIP スクリプトがロードされることです。<li>したがって、ツールチップを取得して生成する を認識しません。

ツールチップ スクリプトが読み込まれる前に、すべてのニュース記事が読み込まれるようにする方法はありますか? 一部のタイトルは他のタイトルよりもロードに時間がかかるように見えるため、スクリプトのロードを単に遅らせるのはあまり賢明ではないと思います。そのため、遅延はかなり長くする必要があります。

4

4 に答える 4

32

下部にある私の更新を参照してください

私もこの問題に取り組んでおり、@Gaby が提供するものと同様の解決策を思い付きました。@Gaby のソリューションの問題は、マウスオーバー イベントが発生するまで qTip が作成されないことです。つまり、最初にマウスオーバーしたときは qTip が表示されませんが、2 回目は表示されます。また、マウスオーバーするたびに qTip が再作成されますが、これは最適ではありません。

私が行った解決策はこれです：

$("li").live('mouseover', function() {
    var target = $(this);
    if (target.data('qtip')) { return false; }
    target.qtip(...);
    target.trigger('mouseover');
});

これが何をするかです：

  • ターゲットを li 要素に設定します
  • その li 要素にすでに qtip があるかどうかを返します
  • li に qtip がない場合、それに qtip を適用します
  • qtipがアクティブになるように、マウスオーバートリガーを再度送信します

私はこれが少しハックであることを知っていますが、うまくいくようです。また、qTip の 2.0 バージョンは、オプションとして live() をサポートする必要があることに注意してください。私が知る限り、現在の 2.0 開発ブランチはまだサポートしていません。

アップデート：

フォーラムで qtip 開発者自身から直接、これを行う適切な方法を次に示します。

$('selector').live('mouseover', function() {
   $(this).qtip({
      overwrite: false, // Make sure another tooltip can't overwrite this one without it being explicitly destroyed
      content: 'I\'m a live qTip', // comma was missing here
      show: {
         ready: true // Needed to make it show on first mouseover event
      }
   });
})

そのため、最初に、「overwrite: false」を使用してマウスオーバーごとに新しい qtips を再作成しないようにします。次に、「show: {ready: true}」を使用して、最初のマウスオーバーで qtip を表示します。

于 2010-03-21T03:53:05.323 に答える
1

jQuery フレームワークのライブ イベントを使用する必要があります。

現在および将来のすべての一致する要素のイベント (クリックなど) にハンドラーをバインドします。カスタム イベントをバインドすることもできます。

たとえば、次のようなことができます

$("li").live( 'mouseover', function(){ 
                                     $(this).qTip(...); 
                                     });

参照: http://docs.jquery.com/Events/live

于 2010-01-05T17:31:06.140 に答える
1

show:{ready:true}無駄ではありませんが、onmouseoverイベントに を追加しただけです。これで Chrome と FF で動作するようになりました。

于 2012-03-30T20:08:56.667 に答える
-1

ええ、私は似たようなものを思いついた。誰かが彼らのフォーラムにも同様のものを投稿したと思います。最初のマウスオーバーでqtipがアクティブになるように、mouseover-eventをmousemoveに変更しました。

$('li').live('mousemove', function() {
  if( !$(this).data('qtip') ) {
     $(this).qtip(...)

また、これは非常にハッキーな解決策であることに同意しますが、より良い解決策を思い付くことができませんでした。おそらく、liを埋めるコールバック関数でqtipをチェックして適用する方が良いでしょうが、私は実際にはそのコードにアクセスできません。

于 2010-03-24T12:33:51.743 に答える