JavaScript. Как отображать изображении по очереди?

Question

[Магжан Биргебайулы]

Добрый день. У меня некая проблема с следующим скриптом:

$(function(){
	var t = $('div'), arr = ['1.jpg','2.jpg','3.jpg','4.jpg'...];
	function loadImg(){
		if( arr.length == 0 ) return;
		var img = new Image(); img.src = arr[0];
		img.onload = function(){
			t.append(img);
			arr.shift();
			loadImg();
		}
	}
});

Вообще в массиве около 20-30 изображении, мне нужно что бы они по очереди загружались.
Скрипт запускается и браузер зависнет пока не загрузить все изображения.
Пожалуйста, помогите подкорректировать скрипт так, что бы загрузка изображении не было заметно для клиента. К примеру: пока он смотрит одно изображение, другие в тихую грузятся.

Answer 1

[Marevin]

img.onload = function(){
   t.append(img);
   arr.shift();
   setTimeout(loadImg,0);
}

Comments

[Магжан Биргебайулы]

Отлично, спасибо!

Answer 2

[Орзубек Рахимов]

Примерно так:

<script>
var i = 0;
var ras = "jpg";
function run(){
	i++;
	document.write('<img src="'+i+'.'+ras+'">');
}
setTimeout(run, 1000);//1секунда
</script>