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

您可以使用屏幕外/缓冲区图像来测试新网址上的图片，然后再将网址分配给您的网页元素。如果加载失败，您可以阻止分配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);
}

Answer 2

您可以使用 API ，其中数据将包含图片的路径，服务器将对此进行计数并发送给用户。或者您可以使用模板，其中服务器将使用所有文件和图片路径提供HTML。

PHP模板示例：

    <img src="<php>print(imagePath);<?php>">

我不知道你在做什么，但我不认为这是一个很好的做法，因为这是一项服务器方面的任务，你在客户端做了很多限制

但是看看这个问题，javascript检查文件的大小，看看图像是否坏了： Determining image file size + dimensions via Javascript?

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

2 个答案: