jquery：如何在加载图像数组中的每个图像时淡入淡出？

Question

我对 Jquery 真的很陌生，但是，我已经进行了研究并努力做到这一点。我已经成功地制作了一张图片来做我想做的事：

• 预加载图片(img = new Image(); $(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 是添加到显示 loading.gif 动画的 div 的类。

现在，我想要实现的是在图像 src 数组上实现这一点，这就是我目前所拥有的：

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

我也尝试将 .append() 移动到 .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”。