如何通过AJAX向数据库调用的图像添加进度条

Question

我有一个AJAX脚本调用我的php文件从数据库中提取图像。我想在加载时为图像实现进度条。我从数据库中获得了很好的图像，一次只有12个具体。我想知道如何在加载图像时添加进度条。图像通过路径位置附加到div。

JAVASCRIPT

  $.ajax({
        url: "/gallery/getimages.php",
        type: "POST",
        dataType: "json",
        data: {
            imagesArray: imgArr,
            action: "load",
            category: q,
            isLimited: isLimited
        },
        success: function(JSONrs) { 
        JSONconsoleDebugObj = JSONrs;
            if(JSONrs.length > 0){

            console.log("check returned okay");
                console.log("okay ... create page in book");
                pageDeets = createPage();

                for (var i = 0; i< JSONrs.length; i++){
                    console.log("okay ... load image" + JSONrs[i]["image_thumb"] );
                    updateGallery(JSONrs[i],pageDeets[0],tmpNum);
                }

                createClear(pageDeets[0]);

                console.log(tmpNum);
                runJumperAnimation(tmpNum);
            } else {
                runJumperAnimation(pageNum);
            }
            console.log("jump to " + tmpNum);
        },
        error: function(jqXHR, textStatus, errorThrown){

            console.log(jqXHR.responseText);
            console.log(textStatus, errorThrown);
        }

    });

我假设我可以在更新图库的for循环之间运行一些东西。我只是不知道如何实现进度条。实际上，我需要知道服务器正在发出的请求，即文件大小和到目前为止加载的数量。我认为我需要使用某种XMLHttpRequest()，但网上的每个地方都会讨论base64编码图像来执行此操作。这不是一个选项，因为整个脚本的工作原理是通过图像的内联src属性知道图像的来源。