DOM images preloader

index.html

<div class="load-container">
    <img src="img/logo.gif" alt="logo" class="loading"/>
</div>
<div>
  <img src="img/sequence/Frame0001.jpg" alt="" class="sequence" id="myimg">
</div>

script.js

$(function () {
    //Preloader Images.
    var images = [];
    var urls = [];
    var lengthIndex;
    function preloadImages(array) {
        if (!preloadImages.list) {
            preloadImages.list = [];
        }
        var list = preloadImages.list;
        for (var i = 0; i < array.length; i++) {
            var img = new Image();
            img.onload = function() {
                var index = list.indexOf(this);
                if (index !== -1) {
                    // remove image from the array once it's loaded
                    // for memory consumption reasons
                    list.splice(index, 1);
                }
                if(list.length === 0){
                    $('.load-container').fadeOut();//.gif 'Loader' image is removed, then images loaded are shown.
                }
            }
            list.push(img);
            img.src = array[i];
            images.push(img.src);//This's the array to use finally into the html document
        }
    }
  
    for (var i = 1; i <= 1375; i++) {
        lengthIndex = i.toString().length;
        switch (lengthIndex) {
            case 1:
                urls.push("img/sequence/Frame000"+ i +".jpg");
            break;
            case 2:
                urls.push("img/sequence/Frame00"+ i +".jpg");
            break;
            case 3:
                urls.push("img/sequence/Frame0"+ i +".jpg");
            break;
            case 4:
                urls.push("img/sequence/Frame"+ i +".jpg");
            break;
        }
    }
  
    preloadImages(urls);
  
    for(i=0; i<images.lenght; i++){
      $("#myimg").attr("src", images[i);//This applies in this way...
    }
});