jquery：我如何淡入圖像數組中加載每個圖像？

Question

我對Jquery真的很陌生，但是，我已經完成了研究並努力做到這一點。我已經成功地進行了一個形象的事，我想：

• 預緊圖像（IMG =新的圖片（）; $（IMG）.attr（ 'src' 中，someurl）;）
• 追加到容器
• 褪色的圖像中（使用.hide（）和.fadeIn（500））
• 上負載增加一些類和隱藏與使用此代碼的加載動畫

.gif圖像：

var img = new Image(); 
 
$(img).attr('src', 'images/thumbnails/thumb1.png').attr('alt', 'thumbnail' + 1); 
 
$(img).appendTo($('.thumbnail')).hide().fadeIn(400); 
 
$('.thumb img').load(function(){ 
 
    $('.loader').fadeOut(300); 
 
    $(this).addClass("thumbimage"); 
 
});

其中.loader被類添加到一個div，顯示loading.gif動畫。現在

，我想達到什麼是實施這一形象SRCS的陣列上，這是我到目前爲止有：

var imagesrc = [ someurl, someurl, ... ]; 
 
$(document).ready(function(){ 
 
\t var arr = new Array(); 
 
\t function loadimage() { 
 
\t \t for (i = 0; i < imagesrc.length; i++) { 
 
\t \t \t arr[i] = new Image(); 
 
\t \t \t $(arr[i]).attr('src', imagesrc[i]); 
 
\t \t \t $(arr[i]).attr('alt', 'thumbnail' + i); 
 
\t \t \t $(arr[i]).hide().appendTo($('.thumbnail').eq(i)).fadeIn(300); 
 
\t \t } 
 
\t } 
 
\t loadimage(); 
 
    $('.thumbnail img').load(function(){ 
 
\t \t var par = $(this).parent(); 
 
\t \t var row = par.parent(); 
 
\t \t var indexrow = row.index('.thumbrow'); 
 
\t \t var thumbindex = par.index('.thumb') + 3*indexrow; 
 
     //^ this calculates which loading.gif div to fade out 
 
\t \t $('.loader').eq(thumbindex).fadeOut(200); 
 
\t \t $(this).addClass("thumbimage"); 
 
\t }); 
 
});

我也試着移動.load（）放入.load（..）並失敗。

Answer 1

['url1', 'url2'].forEach(function(imageUrl){ 

    var img = new Image(); 
    $(img).attr('src', imageUrl).attr('alt', 'thumbnail' + 1); 
    $(img).appendTo($('.thumbnail')).hide().fadeIn(400); 
    $('.thumb img').load(function(){ 
     $('.loader').fadeOut(300); 
     $(this).addClass("thumbimage"); 
    }); 

}); 

Answer 2

可能與「.thumbnail img」，「thumbimage」有些混淆。和「thum img」。當你把它們分開時，所有三個分開使用是否正確？在最後，而不是$（this）.addClass（「thumbimage」）;中的「thumbimage」。你可能想使用「拇指img」。