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”。