0

画像の配列をページにロードし、終了後にコールバック関数を実行するjavascriptプリローダーがあります。

そのプリロード中に、プリロードされている現在の画像をロードボックスのHTMLページに追加したいと思います。これが私の現在のコードです。現在のコードは各画像に対して機能するのではなく、最後にロードされた画像の名前を表示するだけです。プリローダー関数を修正して、各ループ中に正しい名前をdivに追加するようにするにはどうすればよいですか？

    // Usage: $(['img1.jpg','img2.jpg']).preloadImages(function(){ ... });
// Callback function gets called after all images are preloaded
$.fn.preloadImages = function(callback) {

  checklist = this.toArray();

  this.each(function() {
    $('div.circleText').html('<p>' +  this + '</p>');

    $('<img>').attr({ src: this }).load(function() {

      checklist.remove($(this).attr('src'));
      if (checklist.length == 0) { callback(); }
    });
  });
};

$([

'../img/about/01-inner-small.png',
'../img/about/01-small.png',
'../img/about/blue-gear.png',
'../img/about/orange-gear.png',
'../img/about/slimeGoblin.png',
'../img/about/03-small.png',
'../img/about/slideshow_back.png',
'../img/about/services_octopus.png',
'../img/about/services_pinkblur.png',
'../img/about/services_blur.png',
'../img/about/services_seahorse.png',
'../img/about/services_coral.png',
'../img/about/water3.png',
'../img/about/water2.png',
'../img/about/water1.png',
'../img/about/02-inner.png',
'../img/about/slime-glow.png',
'../img/about/02_longPhoto.png',
'../img/about/photo1.jpg',
'../img/about/orange-gear.png',
'../img/about/blue-gear.png',
'../img/about/01-small.png',
'../img/about/01.png',
'../img/about/slime-transparent.png',
'../img/about/slime.png',
'../img/about/02-small.png',
'../img/about/02.png',
'../img/about/01_head.png',
'../img/about/services_squid.png',
'../img/about/services_crabs.png',
'../img/about/02-small.png'

]).preloadImages(function(){ 
    // $('#loading').transition({ opacity: 0 }, 1000,'in-out',      
    //  function()
    //  { 
    //      $('#loading').hide();
    //  })
});
4

2 に答える 2

0

上記の解決策では問題は解決されず、表示のみが解決されます。

正解はこちら: http://jsfiddle.net/ES8kw/1/

.load()機能は良くありませんでした。

.load(function() {
                delete checklist[$.inArray($(this).attr('src'),checklist)];
                $('#loading').html('<p>' + $(this).attr('src') + '</p>');
                var done = 0;
                $.each(checklist,function(i){ if(typeof checklist[i] == "undefined") { done++; }})
                if (checklist.length == done) {
                  callback();
              }
          });

そして、そのすべてをsetTimeout

于 2012-09-10T04:47:37.577 に答える
0

あなたのコードは正常に動作していますが、その発生速度のせいで気付いていません。次の行を置き換えます。

$('div.circleText').html('<p>' + value + '</p>');

これとともに：

setTimeout(function() {
    $('div.circleText').html('<p>' + value + '</p>');
}, 1000 + (index * 100));

これにより、配列が処理されるときに各配列オブジェクトが確実に表示されます。もちろん、それぞれが表示される時間を調整することもできます。

デモ

于 2012-09-10T03:45:01.377 に答える