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


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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="imgwrap">
        <ul></ul>
    </div>
    <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表示了）


// 把图片放到数组里，一般放在自定义属性data-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);

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

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

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

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

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？

什么是闭包？闭包有哪些应用场景？

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

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

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？

什么是闭包？闭包有哪些应用场景？

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