I have a JavaScript library that manages the downloading of JPEG images for clients asynchronously. However, when dealing with a large number of images, say around 5000, Chrome browser tends to throw an "ERR_INSUFFICIENT_RESOURCES" error during the AJAX request.
Unfortunately, each image must be requested individually as there is no option to bundle them on the server-side.
What solutions can I consider to circumvent this issue? It's worth noting that the download functions perfectly in Firefox...
Below is the code snippet for the current download process:
function loadFileAndDecrypt(fileId, key, type, length, callback, obj) {
var step = 100 / length;
eventBus.$emit('updateProgressText', "downloadingFiles");
var req = new dh.crypto.HttpRequest();
req.setAesKey(key);
let dataUrl;
if (type == "study") {
dataUrl = "/v1/images/";
}else {
dataUrl = "/v1/dicoms/";
}
var url = axios.defaults.baseURL + dataUrl + fileId;
req.open("GET", url, true);
req.setRequestHeader("Authorization", authHeader().Authorization+"")
req.setRequestHeader("Accept", "application/octet-stream, application/json, text/plain, */*");
req.responseType = "arraybuffer";
req.onload = function() {
console.log(downloadStep);
downloadStep += step;
eventBus.$emit('updatePb', Math.ceil(downloadStep));
var data = req.response;
obj.push(data);
counter ++;
//last one
if (counter == length) {
callback(obj);
}
};
req.send();
}