当前位置：文江博客话题详情

JavaScript Gulp 自动化构建工具

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

发布于 2022-09-04 07:04:34 字数 282 浏览 16 评论 0

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

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

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

迷爱 2022-09-11 07:04:34

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

下面是个预加载的例子：

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


<!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);

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

~没有更多了~

关于作者

情绪操控生活

暂无简介

0 文章

0 评论

22 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文