需要帮助找到一种更有效的为这个
问题描述:
我试着放置大量的图片在一个页面上,这是我做的:需要帮助找到一种更有效的为这个
<img src="1.gif" /><br>
<img src="2.gif" /><br>
<img src="3.gif" /><br>
<img src="4.gif" /><br>
<img src="5.gif" /><br>
<img src="6.gif" /><br>
<img src="7.gif" /><br>
<img src="8.gif" /><br>
<img src="9.gif" /><br>
<img src="10.gif" /><br>
<img src="11.gif" /><br>
<img src="12.gif" /><br>
<img src="13.gif" /><br>
<img src="14.gif" /><br>
<img src="15.gif" /><br>
<img src="16.gif" /><br>
<img src="17.gif" /><br>
<img src="18.gif" /><br>
<img src="19.gif" /><br>
<img src="20.gif" /><br>
<img src="21.gif" /><br>
<img src="22.gif" /><br>
<img src="23.gif" /><br>
<img src="24.gif" /><br>
<img src="25.gif" /><br>
是否有任何其他方式做到这一点?像JavaScript中的循环?我试着用JavaScript做循环(i +“.gif”),但它不起作用。
答
var imagesCount = 25;
// Create a fragment to collect the images
var fragment = document.createDocumentFragment();
for (var i = 1; i <= imagesCount; i++) {
var img = document.createElement('img');
// give the image it's src based on i
img.src = i + ".gif";
fragment.appendChild(img);
}
// Insert the images in body
document.body.appendChild(fragment);
+0
谢谢,完美的作品。 – SnacksRain
答
我希望这可以帮助,看到这个完整的例子:
var i;
var generatedImages = "";
for (i = 1; i <= 25; i++) {
var srcString = i + ".gif";
generatedImages += "<img src=" + srcString + " /><br>";
}
document.getElementById("demo").innerHTML = generatedImages;
<!DOCTYPE html>
<html>
<body>
<div id="demo"></div>
<script>
</script>
</body>
</html>
答
HTML
<div id="images-container"></div>
JS
var imagesData = [
{src: "demo.gif", alt: "Demo"},
...
];
var imagesContainer = document.getElementById("images-container");
imagesData.forEach(function (data) {
var img = new Image();
img.src = data.src;
img.alt = data.alt;
imagesContainer.appendChild(img);
});
能否请您提供您的用例一些信息呢?如果你在浏览器中谈论性能和图像,有很多方法可以帮助你 - 或者只是在代码效率方面? –
一个for循环会工作,是的。 'for(var i = 1; i
\ n';'如果这样做不起作用,您能显示完整的JS例程吗? –
请注意,对于有效的html,“alt”属性是必需的。如果图片只是装饰,请使用'alt ='''。 – Stefan