這直接JS就能實現了，實現方式分為【預加載】和【延遲加載】

下面是個預加載的例子：

首先來一個空的HTML頁面和最基本的CSS初始化樣式

Document

* {

margin: 0;

padding: 0;

}

.imgwrap li {

list-style-type: none;

}

img {

vertical-align: top;

}

然后我們要往

• 標簽里塞任意數量圖片(這里我就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 +' "里面加兩個單引號是為了防止變量變成字符串

$('

').appendTo('.imgwrap>ul');

});

};

})(jQuery);

最后調用這個方法就完事

// 調用函數，把圖片集合imgArr傳入,將會自動預加載并插入到頁面

$.preLoadImages(imgArr);

此外還有延遲加載的方法，那就太多種多樣了。。自己先理解上面這個再去百度吧

總結

以上是生活随笔為你收集整理的html列目录带图片,根据目录下的图片的个数，往html文件填充对应数量的img标签，请问有没有实现这种需求的工具？...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。