2

jQueryサイクル プラグインを使用して、いくつかの画像を循環させています。これらの画像はすべて DIV 内に含まれています。まだ読み込まれていない画像が表示されないように、すべての画像が読み込まれるまで、または少なくとも最初の 4 つまたは 5 つが読み込まれるまで、サイクル プラグインを実行したくありません。これを行う簡単な方法はありますか？

クラス「lastImg」をdivの最後のimgに追加し、「load」イベントを追加しようとしました。

Markup
<div id='cycle'>
  <img src=''/>
  <img src=''/>
  <img src='' class='lastImg'/>
</div>

JQuery
    $('lastImg').load(function(){
      $('#cycle').cycle({..});
    });

これはChromeとFFでは問題ないようですが、確かに少し不安定です（画像がキャッシュにある場合、機能しない場合がありますか？）IEではまったくありません（驚き、驚き...）。

これを行う方法について他に提案はありますか？

4

4 に答える 4

3

ドキュメントのロードイベントにサイクルプラグインを接続してみませんか？ドキュメントのロードイベントは、すべてのアーティファクトがダウンロードされると発生します。[DOMが使用可能になるとreadyイベントが発生します。]

試す

$(document).load(function() { //your cycle plugin hookup } );
于 2009-07-12T19:04:34.893 に答える
3

マークアップ:

<div id='cycle'>
  <img src='path1' class='preload' />
  <img src='path2' class='preload' />
  <img src='path3' class='preload'/>
</div>

これを試して：

var cyclerLoaded = false;
var numberOfPreloaded = 0;

function imageLoaded()
{      
  numberOfPreloaded++;

  if (numberOfPreloaded >= 4 && !cyclerLoaded)
  {
    $('#cycle').cycle({..});
    cyclerLoaded = true;
  }
}

$(document).ready(function()
{      

  $('img.preload').each(function()
  {
    // Get image instance.
    var image = new Image();
    image.src = $(this).attr('src');

    if (image.complete)        
      imageLoaded();        
    else        
      image.onload = imageLoaded;

  });

});

...preloadプリロードするすべての画像にクラスがアタッチされている場所。

于 2009-07-11T18:17:17.837 に答える
2

より良い方法は、十分な数の画像をプリロードする関数を作成してから、サイクル関数を呼び出すことです。ページ内の画像がどのように、いつ、どのような順序で読み込まれるかは、ブラウザやその他の状況によって異なる場合があるためです。

これは、ページで参照されているスタイルシートでさえ利用可能なすべての画像をプリロードするajaxianの素晴らしい小さな関数です。

于 2009-07-11T18:14:06.393 に答える
0

コードで間違っていることの 1 つは、 を使用していることですが、使用$('lastImg')する必要があります$('.lastImg')。

したがって、コードはまったく実行されません。

于 2010-08-12T10:20:27.510 に答える