Jquery：DOMがロードされた後のfadeInイメージ。ときどき働く..？

Question

//fade in images after the image has loaded.. 

$(document).ready(function(){ 
    $(".image_ad").hide().bind("load", function() { $(this).fadeIn(400); }); 
}); 

誰かが入力した場合、これはすばらしいことになります。

これは、ページに画像が表示されるのを避けるために書いたのですが、私はむしろ、それぞれの画像が準備が整ったときに読み込まれたページをうまくフェードインします。

問題は時々2つのイメージがロードされないことです。リフレッシュするとこれを修正しますが、私はむしろそれを完璧にして誰にも理由があるかどうか尋ねます。

私は時々、DOMが完全にスクリプトが実行された時点でロードされていないことを、私はそれがdocument.readyにだ気持ちを知っているが、それは可能かもしれない。..

おかげで再び。

---

すべての返信をありがとう！私は今夜​​スニペットで遊んで、役に立つと思ったポストバックをします。もう一度あなたの答えが高く評価されます。

---

以下に見られるように、これは私の必要性のために非常にうまくいくようです。みんな、ありがとう。

$(document).ready(function(){ 
    $(".gallery_image").hide().not(function() { 
     return this.complete && $(this).fadeIn(100); 
    }).bind("load", function() { $(this).fadeIn(100); }); 
}); 

---

ただもう一つ、私が未完了の記事を好まないので...

私はのFirefox 3.6.12でこのdoesntの仕事ことがわかりました。

私はこれを調べます。これが助けるかどうかが、あなたは自分のCSSにこれを追加することにより、hide()コールを取り除くことができます場合

Answer 1

画像がキャッシュされていると推測しているので、loadは発生しません。

隠されているから、キャッシュされた画像を除いてみてください。

$(document).ready(function(){ 
    $(".image_ad").not(function() { 
     return this.complete; 
    }).hide().bind("load", function() { $(this).fadeIn(400); }); 
}); 

またはそれらを隠すが、すぐに完全なものにfadeInを行います。

$(document).ready(function(){ 
    $(".image_ad").hide().not(function() { 
     return this.complete && $(this).fadeIn(400); 
    }).bind("load", function() { $(this).fadeIn(400); }); 
}); 

Answer 2

わからない：あなたはCSSクラスを経由して画像を隠したほうが良いです

img.image_ad{ 
    display: none; 
} 

Answer 3

.image_ad { display:none; } 

そして設定：これは何をするか

$(document).ready(function(){ 
    $('.image_ad').fadeIn(400); 
}); 

は、画像が開始するように隠されていることを確認していますで、そしてすべてが受信され、ロードされると、その後、で画像をフェードイン。

Answer 4

私は時々 DOMが完全にスクリプトが実行された時間 によってロードされていない、私はそれがであることを知っているという感覚を持っています document.readyそれが可能 かもしれません。..

私はこの問題は、他の方法で回避むしろだと思う：イメージは持っていた後、DOMが完全にロードされている可能性があります。したがって、ロードハンドラがアタッチされると、イメージはすでにロードされており、ハンドラは決して起動されません。

image.completeを確認するか、js経由でイメージを挿入して、すぐにロードハンドラを接続することで回避できます。

試してみてください。

$(document).ready(function(){ 
    $(".image_ad").hide().bind("load", function() { $(this).fadeIn(400); }).each(function() { 
     if(this.complete && jQuery(this).is(":hidden")) { 
      jQuery(this).fadeIn(400); 
     } 
    }); 
}); 

（またはそのような何か）。

Answer 5

私は別のフォーラムで見つけたコードからこの非常に単純な機能を採用しました。イメージの読み込みが完了したときに使用するコールバック関数が含まれています。指定されたコンテナ内のすべてのイメージの読み込みが完了すると、各イメージが読み込まれるにつれてフェードインしなくなりますが、すべてのイメージがフェードインします。私はあなたが必要とするこのコードを適応させることができると確信しています。

function imgsLoaded(el,f){ 
    var imgs = el.find('img'); 
    var num_imgs = imgs.length; 

    if(num_imgs > 0){ 
    imgs.load(function(){ 
     num_imgs--; 
     if(num_imgs == 0) { 
     if(typeof f == "function")f();//custom callback 
     } 
    }); 
    }else{ 
    if(typeof f == "function")f();//custom callback 
    } 
} 

USAGE：

imgsLoaded($('#container'),function(){ 

$('.image_ad').fadeIn(400); 

}); 

この情報がお役に立てば幸い！

w.