javascript - 使用 javascript 检查文件夹内图像文件的数量

Question

嗨，我刚开始使用 javascript，但遇到了一个问题。所以我有这个文件夹，其中包含我需要显示的图像，并且我正在使用 javascript 来显示这些图像。每个图像都被命名​​为 Slidex.PNG，其中 x 是幻灯片的数量。 到目前为止我所拥有的是

var baseUrl = "{{ asset($chkdir) }}/";
        alert(baseUrl);
        var pictureIndex = 1;

        function next()
        {

            var image_url = baseUrl + 'Slide' + pictureIndex + '.PNG';
            document.getElementById("viewer").src = image_url ;
            pictureIndex++;
        }

它到目前为止正在工作，但我的问题是，例如，我在 Slide5.PNG 之后的文件夹中有 5 个图像，它仍然加载 Slide6.PNG，它显示损坏的图像，我只是想知道是否有办法获得文件夹内图像文件的总数。有什么建议吗？提前致谢!

Answer 1

在将 URL 分配给页面元素之前，您可以使用一个离屏/缓冲区图像来测试新 URL 处的图像。如果加载失败，您可以阻止分配 src 并阻止将来的任何加载尝试。

此外，通过使用缓冲图像，浏览器已经下载了您的图像，因此在下载新网址时，在您的页面上显示图像不会有延迟。

对于此示例，我假设您使用计时器重复调用 next():

var pictureIndex = 1;
var baseUrl = "{{ asset($chkdir) }}/";
var image_url = undefined;
var timer = setInterval(next, 5000);

var tester = new Image();
tester.onload = imageFound;
tester.onerror = imageNotFound;

function next()
{
  image_url = baseUrl + 'Slide' + pictureIndex + '.PNG';
  tryLoadImage(image_url);
}

function tryLoadImage(url) {
  tester.src=url;
}

function imageFound() {
  document.getElementById("viewer").src = image_url;
  pictureIndex++;
}

function imageNotFound() {
  // perform some function to stop calling next()
  clearInterval(timer);
}