我创建了一个元素填充器,它获取某些元素,将它们包装在 HTML 标记中并将它们附加到容器中。我遇到的问题(如果有的话更令人讨厌)是要加载的每个图像都必须自动输入。有没有办法从文件夹中检索所有图像并将它们加载到数组中?
我有这段代码,它可以工作,但需要手动输入:
$(window).on('load', function () {
var gallery = document.getElementById("grid");
var images = [
"./imgs/galeria/0.jpg",
"./imgs/galeria/1.jpg",
"./imgs/galeria/2.jpg",
"./imgs/galeria/3.jpg",
"./imgs/galeria/4.jpg",
"./imgs/galeria/7.jpg",
"./imgs/galeria/6.jpg",
"./imgs/galeria/5.jpg",
"./imgs/galeria/8.jpg",
"./imgs/galeria/9.jpg",
"./imgs/galeria/10.jpg",
"./imgs/galeria/11.jpg",
"./imgs/galeria/12.jpg",
"./imgs/galeria/13.jpg",
"./imgs/galeria/14.jpg",
"./imgs/galeria/15.jpg",
"./imgs/galeria/16.jpg",
"./imgs/galeria/17.jpg",
"./imgs/galeria/18.jpg",
"./imgs/galeria/19.jpg",
"./imgs/galeria/20.jpg"
];
for (var i = 0; i < images.length; i++) {
var thumbnailWrapper = document.createElement("div");
thumbnailWrapper.className = "thumbnail-wrapper";
var thumbnail = document.createElement("div");
thumbnail.className = "thumbnail";
thumbnail.dataset.source = "./imgs/galeria/" + i + ".jpg";
thumbnailWrapper.appendChild(thumbnail);
gallery.appendChild(thumbnailWrapper);
}
var thumb = document.getElementsByClassName('thumbnail');
// console.log(thumb);
for (j = 0; j < images.length; j++) {
// $(thumb[j]).attr('src', images[j]);
$(thumb[j]).css('background-image', 'url(./imgs/galeria/thumbs/' + j + 'tbm.jpg)');
// console.log(j);
// console.log(images[j]);
}
您可以在这个 website 中看到正在运行的脚本我在“画廊”部分制作。
编辑:也许是ajax?我想把 php 排除在外
EDIT2:我想用ajax来实现,现在这是正确的代码
最佳答案
您不能使用客户端 JavaScript 扫描服务器上的文件夹。如果您不知道该文件夹包含哪些文件,那么仅靠 AJAX 甚至是行不通的。
您必须使用服务器端代码(例如 PHP)来查找文件夹中的所有文件,然后它们以某种方式将它们传送到客户端。这是我看到的唯一方式。
这种方法可行:
$images = glob('imgs/galeria/*.jpg');
echo '<div id="grid">';
foreach ($images as $key => $image) {
echo '<div class="thumbnail-wrapper">';
echo '<div
class="thumbnail"
data-source="' . $image . '"
style="background-image: url(imgs/galeria/thumbs/' . $key . 'tbm.jpg)"
></div>';
echo '</div>';
}
echo '</div>';
我希望这能像您的 JavaScript 代码一样工作。
关于javascript - 元素传播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44606710/