Prerequisite: Adjust chromium / chrome launcher to add required flag , e.g.; chromium-browser --allow-file-access-from-files or google-chromne --allow-file-access-from-files ; see How do I make the Google Chrome flag "--allow-file-access-from-files" permanent?
html, having number of img elements equal to image files in folder
<!-- note , `src` attribute not included -->
<img class="image" style="opacity:0.0" alt="1">
<img class="image" style="opacity:0.0" alt="1a">
<img class="image" style="opacity:0.0" alt="1b">
<img class="image" style="opacity:0.0" alt="1c">
You should then be able to use approach described at Preloading images in HTML to iterate an array of image file names to load multiple images in succession.
Using XMLHttpRequest() with responseType set to Blob , URL.createObjectURL , new Promise() constructor , Promise.all()
var arr = ["file:///home/user/path/to/image/file-1"
, "file:///home/user/path/to/image/file-2"];
function loadImages(src) {
return new Promise(function(resolve, reject) {
var request = new XMLHttpRequest();
request.onload = function() {
$("<img/>", {
src: URL.createObjectURL(this.response)
}).on("error", reject)
.appendTo("body");
resolve(src + " loaded")
}
request.onerror = reject;
request.open("GET", src);
request.responseType = "blob";
request.send();
})
}
Promise.all(arr.map(function(src) {
return loadImages(src)
}))
.then(function(data) {
console.log(data)
}, function(err) {
console.log("error", err)
})
See also jquery-ajax-native which allows Blob or ArrayBuffer to be returned from jQuery.ajax()
$.ajax({
dataType: 'native',
url: "file:///home/user/path/to/image/file",
xhrFields: {
responseType: "blob"
}
})
.then(function(data) {
$("<img/>").attr("src", URL.createObjectURL(data))
.appendTo("body")
})
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
