我正在尝试加载文件夹内的所有图像(我有超过20K)，向用户展示它们(只是试图构建一个到处都有图像的页面)，在页面加载时，在我的HTML中使用JS 。但我无法加载图像。 Web 控制台上也没有错误。
这段代码有什么问题？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<script>
var folder = "images/";
$.ajax({
url : folder,
success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if( val.match(/\.(jpe?g|png|gif)$/) ) {
$("body").append( "<img src='"+ folder + val +"'>" );
}
});
}
});
</script>
</body>
</html>
此外，其他无需 JS 即可实现相同功能的解决方案也值得赞赏。
提前致谢。
最佳答案
先决条件:调整 chromium/chrome 启动器以添加所需的标志，例如； chromium-browser --allow-file-access-from-files 或 google-chromne --allow-file-access-from-files ；请参阅How do I make the Google Chrome flag "--allow-file-access-from-files" permanent?
html，img元素的数量等于文件夹中图像文件的数量
<!-- 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">
然后您应该能够使用 Preloading images in HTML 中描述的方法迭代图像文件名数组以连续加载多个图像。
<小时/>使用 XMLHttpRequest() 并将 responseType 设置为 Blob 、 URL.createObjectURL 、 new Promise () 构造函数，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)
})
另请参阅jquery-ajax-native它允许从 jQuery.ajax() 返回 Blob 或 ArrayBuffer
$.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")
})
关于javascript - 使用 Javascript 从文件加载图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35531195/