Problem z preloadowaniem 20 zdjec

Question

Witam. Zbudowalem sobie taki preloader, ale jest z nim problem. Mianowicie on chyba nie dziala. Niby zdjecia sie nie pikseluja, ale przy wczytaniu zdjecia "blyskaja" i pojawiaja sie nagle. Problemem moze byc to ze wczytuje to asynchronicznie. Ponadto wydaje mi sie ze i w funkcji wewnetrznej jest poza zakresem tego i wyzej. Ktos wie jak to mozna naprawic?

$(window).on("load", (function () {
        PrepareImgs();
    console.debug('loaded');
}));
function preloadImage(url) {
    var img = new Image();
    img.src = url;
}

var sectionArray = ["whoAreWe", "video", "web", "community", "charity"];
var imgArray = [];
function PrepareImgs() {
    // console.debug("PrepareImgs started");
    for (var i = 0; i < 5; i++) {
        for (var j = 1; j <= 4; j++) {
            var zdj = "Assets/Images/CroppedAndCleaned/" + sectionArray[i] + "/pp" + j + ".jpg";
            imgArray.push(zdj);
        }
    }
    LoadImages();
}

function LoadImages() {
    // console.debug("LoadImages started");
    var i = 0;
    $(imgArray).each(function () {
        // console.debug("loop started");
        var img = new Image();
        $(img).attr('src', imgArray[i]);
        img.src = imgArray[i];
        console.debug(i);
        // function preloadImage(url)
        // {
        //     var img=new Image();
        //     img.src=url;
        // }
        img.onload = function () {
            console.debug("Internal loop started");
            i++;
            console.debug(i);
            if (i == imgArray.length)
                HideLoader();
        }
    });
}
function HideLoader() {
    // console.debug("HideLoader Started");
    setTimeout(function () {
        $('body').addClass('loaded');
    }, 1);
}