需要幫助找到一種更有效的爲這個

我試着放置大量的圖片在一個頁面上，這是我做的：需要幫助找到一種更有效的爲這個

<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」），但它不起作用。

來源

2017-05-27 SnacksRain

能否請您提供您的用例一些信息呢？如果你在瀏覽器中談論性能和圖像，有很多方法可以幫助你 - 或者只是在代碼效率方面？ –

一個for循環會工作，是的。 'for（var i = 1; i <= 25; ++ i）html + ='
\ n';'如果這樣做不起作用，您能顯示完整的JS例程嗎？ –

請注意，對於有效的html，「alt」屬性是必需的。如果圖片只是裝飾，請使用'alt ='''。 – Stefan

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

來源

2017-05-27 11:48:47

謝謝，完美的作品。 – 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>

來源

2017-05-27 11:53:55 QuakeCore

HTML

<div id="images-container"></div>

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

來源

2017-05-27 12:10:32

需要幫助找到一種更有效的爲這個

回答

相關問題