如何使用 jQuery/JavaScript 从文件名不连续的目录动态加载图像？

使用 jQuery/JavaScript 从目录动态加载图像

问题：

我需要将名为“images”的文件夹中的多个图像加载到我的网页中。但是，图像文件名不是连续的整数。如何使用 jQuery 或 JavaScript 实现此目的？

答案：

以下代码片段会将“images”文件夹中的所有图像加载到正文中HTML 页面：

<code class="javascript">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 +"'>" );
            } 
        });
    }
});</code>

说明：

代码首先创建一个文件夹变量，用于保存“images”文件夹的路径。然后，它使用 jQuery $.ajax() 函数加载文件夹的内容。成功回调函数迭代返回的数据以检查文件扩展名是否与接受的文件类型（.jpg、.jpeg、.png、.gif）匹配。如果是，该函数将创建一个具有适当源属性的图像元素，并将其附加到页面正文。

注意：

• 此代码假设 Apache 服务器打开了选项索引功能。
• 对于 Express for Node 等其他服务器，“serve-index”NPM 包可用于允许目录列表。
• 可以通过添加更多接受的文件类型或修改服务器配置以允许目录列表来扩展代码。

以上是如何使用 jQuery/JavaScript 从文件名不连续的目录动态加载图像？的详细内容。更多信息请关注PHP中文网其他相关文章！