JavaScript. How to display images one by one?

Question

JavaScript

Good afternoon. I have some problem with the following script:

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

In general, there are about 20-30 images in the array, I need them to be loaded one by one.
The script is run and the browser will hang until all the images are loaded.
Please help to correct the script so that the image loading would not be noticeable to the client. For example: while he is watching one image, others are silently loaded.

Answer 1

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

Answer 2

More or less like this:

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