1

私はこのようなものを持っています

function loadImages(){
   var num = 1;
   $('.myElement').each(function(){
      var image = $("<img>").attr("src",mySrc).load(function(){
         if(num == 1){
            //do something - does not work
         }
      });       
      num++;
   });
}

そして、条件if（num == 1）はまったく機能しません。これは、最初の画像が読み込まれている間、each（）関数が引き続き機能し、load（）関数内の条件が再生されるため、var numの値が大きくなるためだと思います...どうすれば修正できますか？

どうも

全機能コード

function loadThumbs(imageCount){
var perc = 0;
var cache = [];
var thumbHolderWidth = 0;
var thumbHolderHeight = 0;
$('#thumbs').find(".image_thumb").each(function(enumThumb){
    if(enumThumb == 0){
          $(this).addClass('active');
    }                               
    var thisThumbSrc = $(this).find('img').attr('src');
    var smallim = $("<img>").attr("src",thisThumbSrc).load(function(){
        var thumbWidth = this.width;
        var thumbHeight = this.height;
        thumbHolderWidth = thumbHolderWidth + thumbWidth + 12;
        if(thumbHeight > thumbHolderHeight){
            thumbHolderHeight = thumbHeight;
        }
        });
        cache.push(smallim);

    var imgSrc = $(this).attr('bigimg');
    var im = $("<img>").attr("src",imgSrc).load(function(){
        if(enumThumb == 0){
            imWidth = this.width;
            imHeight = this.height;
            resizeOverlay(imWidth,imHeight,imgSrc);
        }
        perc = perc + (100/imageCount);
        var loaderWidth = Math.round(winWidth*perc/100);
        $('#thumb_loader').stop().animate({'width':loaderWidth+'px'});
        if(Math.round(perc) >= 100){
            $('#thumb_loader').animate({
                'height':'1px',
                'margin-top':'0px'
            },'fast',function(){
                $('#thumb_loader').addClass('loaded');
            });
        }
    });
    cache.push(im);
});
$('#images_overlay').find('#thumbs').css({
    'width':thumbHolderWidth+'px',
    'height':thumbHolderHeight+10+'px',
    'left':winWidth/2-thumbHolderWidth/2+'px'
})
$('#images_overlay').find('#thumbs').fadeIn();
}
4

4 に答える 4

4

jQueryのeachメソッドは、コールバック関数へのインデックスを提供します。専用のイテレータ変数は必要ありません。

$( '.myElement' ).each(function ( i ) {
    // use i here
});
于 2012-07-21T19:50:01.573 に答える
0

作成したnumは関数のスコープ内にあり、loadImages終了eachすると の値がnum最大値になります。今'load'は非同期のもので、each終了後も呼び出されます。そのとき、「num」の値は最大値でなければなりません。したがって、の呼び出しごとに、load numすでに最大値に達しており、num==1満たされることはありません

1つのソリューションは次のようになります。

function loadImages(){
   $('.myElement').each(function(num){
     var image = $("<img>")
       .attr("src",mySrc)
       .load((function(numAlias){
         return function() {
            if(numAlias == 1){
            //do something - does not work
            }
          }
      })(num));       
   });
}

各繰り返しのサブスコープの作成に関する詳細な説明は、ここにあります。匿名ラッパーから関数を返しますか?

負荷をアタッチする前に src を設定すると、負荷イベントが見逃されたように見えるブラウザ固有の状況もある可能性があります。問題は以前にもありましたが、キャッシュされた画像のChromeにバグがあったように、修正されたかどうかはわかりません.

ロード後に src を追加することは、信頼できる方法のように見えます。

var image = $("<img>").load(function(){
         if(num == 1){
            //do something - does not work
         }
      }).attr("src",mySrc);
于 2012-07-21T21:21:52.203 に答える
0

mySrc正しい値を渡していないようです。

mySrc次のようなものでなければなりませんYourImage.jpg

$('<img>').attr('src', mySrc).load(function() {  
  alert('Image Loaded');  
});

を使用する必要があるのはなぜnum++ですか? 各関数自体で要素のインデックスを取得できます。

于 2012-07-21T19:58:16.047 に答える
0

$.each関数とforループを混同しています。num変数やインクリメントの必要はありません。

$.each 関数のすべての機能を使用してできることの例を次に示します。

function loadImages(){
  $('.myElement').each(function(i, el){
    var image = $('<img>', {
      src: 'myimage'+i+'.jpg' // Loads a different image for each element.
    }).load(function(){
      image.hide().appendTo( $(el) ).fadeIn();  // Once loaded, appends image to .myElement and fades it in
    });
  });
}
于 2012-07-21T20:08:19.460 に答える