Jquery 预加载大量图像，停止预加载屏幕

我正在尝试预加载20张图片。我已经写了这段代码，但我不确定它是否有效。尽管它们没有像素化，但由于闪烁和滞后，它们看起来很奇怪。知道我做错了什么吗

$(window).on("load", (function () {
   PrepareImgs();
   console.debug('loaded');
}));
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+=1;

         if (i == $(imgArray).length)
             HideLoader();
     }
 });
}
function HideLoader() {
 // console.debug("HideLoader Started");
 setTimeout(function () {
     $('body').addClass('loaded');
 }, 1);
}

$（窗口）.on（“加载”，（函数（）{
PrepareImgs（）；
调试（'loaded'）；
}));
var sectionArray=[“whoAreWe”、“视频”、“网络”、“社区”、“慈善机构”]；
var Imgaray=[]；
函数PrepareImgs（）{
//调试（“准备启动”）；
对于（变量i=0；i<5；i++）{
对于（var j=1；j试着遵循这个例子，
它加载图像并在加载完所有图像后将其附加到DOM中

它使用
承诺


函数预加载图像（…图像）{
回报承诺
.全部(
images.map（（src，i）=>新承诺（（解析，拒绝）=>{
src=`https://lorempixel.com/400/200/${src}/图像编号-${i}`；
常量img=$（'解析（img））
.on（'错误'，拒绝）
}))
)
;
}; 
预加载图像（‘运动’、‘食品’、‘商业’、‘动物’、‘夜生活’、‘时尚’）
。然后（res=>{
log（'imagesloaded'）；
返回res.forEach（$img=>$img.appendTo（'body'））
})
；
我认为主要问题在于您的
onload
处理程序。对我来说，两个明显的问题是
onload
是异步的；每个图像的加载事件将在不同的时间触发，这取决于加载所需的时间，并且可能不是按照您期望的顺序触发的。
I
的增量可能不会影响
i
在外部范围中。另外，您不需要将
imgaray
传递到
jQuery（）中
以获取长度。按原样，它可能返回
0
或
1
而不是
20
。是的，它总是返回0，这让人困惑。那么我应该停止循环，直到事件onload完成吗？有可能吗？你能解释一下原因吗？然后（res=>part？接受一个回调，当承诺得到解决时将调用该回调。它像伪代码吗？我的IDE对我大喊大叫，因为我使用=>它是
ES2015
，你应该对它有很好的支持…你使用的是哪种浏览器？单击蓝色按钮
运行代码片段
我看到它在这里工作。我正在使用Chrome。我编辑了它说IDE不喜欢它。我使用的是PHPStorm和WebStorm