jqueryでの画像表示について

質問

どなたか教えて頂ければ幸いです。

画像のプリロードをするためjqueryを書いているのですが、
うまくいかず助けて頂きたくまいりました。

<div id="slideshow" class="clearfix">
<ul class="slider clearfix">
<li><a href="#"><img src="img/dress1.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/dress2.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/dress3.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/dress4.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/dress5.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/dress6.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/dress7.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/dress8.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/dress9.jpg" alt="" /></a></li>
</ul>
</div>

$('#slideshow .slider li').hide();//ページ上の画像を隠す

var i = 0;
var c = 0;
$(window).bind("load", function() {
var c = setInterval(showImg() , 500);
});

function showImg() {
var imgLength = $('#slideshow .slider li').length;
if (i >= imgLength) {
clearInterval(c);
}
$('#slideshow .slider li:hidden').eq(0).fadeIn(500);
i++;

}

上記のように書いたのですが、ループしてくれません。
i++がきいてないように思います。
一枚ずつ表示していき、非表示の最初のliにフェイドインさせるようにしています。

すみませんが教えて頂ければ幸いです。
宜しくお願い致します。

回答No.3

fujillin · ベストアンサー

#2です。

＞returnを使用する意味はあるのでしょうか
returnをはずしてみればわかるかと思います。

全体としてはsetTimeouteを利用してループ内でまとめて処理をセットしている形になっています。
（そのときにはまだ実際のfade処理は行なわれていません。）

通常のsetTimeoutは、
　setTimeout( fucntion, interval)
といった使われ方をしますが、function部分は引数がない場合は、function名のみを指定することですみます。
今回の例では変数「i」の値を利用したいのですが、
　setTimeout(doFade(i), interval * i);
とすると、この文を実行するタイミングで、doFade(i)が評価されてしまいます。

これを避ける意味で
　　setTimeout( function(){ doFade(i) }, interval * i);
とすれば、function(){}内は、指定した時間後に実行されるようになりますが、今度は、そのタイミングで変数「i」の値が評価されるために、思った（予定した）処理と違うことが起こります。
ということで、回答のような記述方法を取っています。（他の方法も考えられると思いますが）

記述方法についての詳細は、このあたりをご参考に…
http://www.atmarkit.co.jp/fdotnet/ajaxjs/ajaxjs03/ajaxjs03_04.html

お礼

わかりました！！
ご親切にどうもありがとうございました！！

回答No.2

fujillin

ほとんど同じ質問に回答したばかりのような気が…

http://okwave.jp/qa/q7600845.html

お礼

すみませんありがとうございます。
あと一点質問がございます。

回答に書かれていた
$(function(){
　$('.fade li').hide();
});

$(window).bind("load", function(){
　var interval = 300; //表示間隔

　for(var i=0; i<$('.fade li').length; i++)
　　setTimeout(doFade(i), interval * i);

　function doFade(i){
　　return function(){ $('.fade li').eq(i).fadeIn(1000); };
　}

最後のreturnの部分なのですが、returnを使用する意味はあるのでしょうか。またどこに返っているのでしょうか。
実際returnについてよくわからない部分があり、ずっと調べてはいるものの、なかなかうまく把握できないものでご教示いただければ幸いです。
宜しくお願い致します。

回答No.1

askaaska

var c = setInterval(showImg() , 500);

を

c = setInterval(showImg , 500);

にしてみるとかどお？

お礼

ありがとうございます。原因はそこではなかったものの、確かに間違いでした。