异步加载进度条＆Javascript中的1000张图像

Question

我有一个异步例程来生成和加载超过1000个图像。 触发Load事件后，进度条运行良好，并在显示每张图片时通知用户。 给定＃或图像，程序需要很长时间来生成并将图像分配给它们各自的图像。如何在第一阶段包含进度条？ 如果我有一些图像，那么设置阶段会很快，并且不需要进度条。但随着图像尺寸的增加，需要设置阶段的进度条。任何人都可以帮忙吗？

下面是我找到的代码

            var loaded = 0; var i = 0; var k = 0; var massimo = 5;
            var expected = massimo;
            $(document).ready(function ()
            {
                $("#main1").html("<h1>" + "Preparing Data" + "</h1>");
            });
            $(document).ready(function ()
            {
                var page = 0, loaded = 0, perpage = massimo, main = $('#main'), expected = perpage,loadMore = $('#loadMore');
                loaded = 0; expected = 0;
                var deferred = $.Deferred().resolve();
                for (q = 0; q <= 4000; q++)
                {
                    deferred = $("#main").showImage(rthis(), expected, deferred);
                    expected++; $("#ChartDiv1").html("");
                }
                NProgress.start();
                page++;
                $("#ChartDiv1").remove();
            });

            $.fn.showImage = function (src, contexpt, deferred)
            {
                var elem = $(this);
                var result = $.Deferred();
                var holder = $("<div id=\"" + "id_" + contexpt + "\" class=\"photo\" />").appendTo(elem);
                var img = $("<img id=\"" + "img_" + contexpt + "\" >");
                $("#id_" + contexpt).append(img);
                img.load(function ()
                {
                    i += 1; 
                    deferred.always(function ()
                    {
                        var xloaded = loaded + 1;
                        loaded++; NProgress.set(loaded / expected);
                        img.hide().appendTo(holder).delay(1000).fadeIn('fast', function () { result.resolve(); });
                        k += 1;
                    });
                });
                img.attr('src', src);
                img.attr('hidden', true);
                return result;
            }

        function rthis()
        {
            onLoadDoc();
            chart2Img(chart1, img);
            return img.src;
        }