javascript - 根据目录下的图片的个数，往html文件填充对应数量的img标签，请问有没有实现这种需求的工具？-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

据说自动构建工具可以实现这种需求，可我对这个从来没接触过。网上也找不到相应的教程，请大家指点我一下。

我对于自动化的工具只用过`node.js`安装个`browser-sync`来自动刷新。

怪我咯

走同样的路，发现不同的人生

全部回复(1)

PHPz2017-04-11 10:17:34 1楼

这直接JS就能实现了，实现方式分为【预加载】和【延迟加载】

下面是个预加载的例子：

首先来一个空的HTML页面和最基本的CSS初始化样式


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p class="imgwrap">
        <ul></ul>
    </p>
    <script src="js/jquery-1.11.3.min.js"></script>
    <!-- /demo.js就是下面要写的js代码 -->
    <script src="js/demo.js"></script> 
</body>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}

.imgwrap li {
    list-style-type: none;
}

img {
    vertical-align: top;
}
</style>

</html>

然后我们要往<ul>标签里塞任意数量图片（这里我就001.jpg002.jpg003.jpg表示了）


// 把图片放到数组里，一般放在自定义属性src中直接获取，这里我手写就直接写了

var imgArr = ['images/001.jpg', 'images/002.jpg', 'images/003.jpg'];

然后我在$对象上定义了一个静态方法，功能就是【遍历数组】——【生成li-a-img标签】把图片插入页面

//为了操作方便这里我使用jQuery，当然你用js也一样
(function($) {
    // arguments缩写为args
    $.preLoadImages = function(args) {
        $.each(args, function(index, val) {
            // " '+ val +' "里面加两个单引号是为了防止变量变成字符串
            $('<li><a href="javascript:void(0)"><img src="' + val + '"/></a></li>').appendTo('.imgwrap>ul');
        });
    };
})(jQuery);

最后调用这个方法就完事

// 调用函数，把图片集合imgArr传入,将会自动预加载并插入到页面
$.preLoadImages(imgArr);

此外还有延迟加载的方法，那就太多种多样了。。自己先理解上面这个再去百度吧

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>

据说自动构建工具可以实现这种需求，可我对这个从来没接触过。网上也找不到相应的教程，请大家指点我一下。

我对于自动化的工具只用过node.js安装个browser-sync来自动刷新。

我对于自动化的工具只用过`node.js`安装个`browser-sync`来自动刷新。