jquery: Как я могу исчезать при загрузке каждого изображения в виде массива изображений?

Question

Я действительно новичок в JQuery, однако, я провел исследования и старался сделать это. Я успешно сделал одно изображение, чтобы делать то, что я хочу:

• поджать изображения (IMG = новое изображение(); $ (IMG) .attr ('ЦСИ', 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 анимацию.

Теперь, что я хочу добиться того, чтобы реализовать это на массиве Суданского Красного Полумесяца изображения, и это то, что я до сих пор:

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 }); 
 
});

Я также попытался переместить .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". Все три отдельно используются правильно, как вы их выложили?

В конце вместо «thumbimage» в $ (this) .addClass («thumbimage»); вы можете использовать «thumb img».