Hilfe brauchen eine effizientere für diesen

Im finden versucht, viele Bilder auf einer Seite zu platzieren, und das ist, wie ich es tat:Hilfe brauchen eine effizientere für diesen

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

ist es eine andere Möglichkeit, es zu tun? Wie eine For-Schleife in Javascript? Ich habe versucht, etwas mit Javascript for loop (i + ". gif"), aber es funktioniert nicht.

Quelle

2017-05-27 SnacksRain

Könnten Sie bitte etwas mehr Informationen über Ihre usecase zur Verfügung stellen? Wenn Sie über Leistung und Bilder im Browser sprechen, gibt es viele Möglichkeiten, Ihnen zu helfen - oder geht es nur um Effizienz in Ihrem Code? –

Eine for-Schleife würde funktionieren, ja. 'für (var i = 1; i <= 25; ++ i) html + = '
\ n';' Wenn das also nicht funktioniert, können Sie die komplette JS-Routine anzeigen? –

Beachten Sie, dass "alt" -Attribute für gültiges HTML erforderlich sind. Wenn Bilder nur dekorativ sind, verwenden Sie '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);

Quelle

2017-05-27 11:48:47

Danke, funktioniert perfekt. – SnacksRain

Ich hoffe, das hilft, finden Sie in diesem komplettes Beispiel:

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>

Quelle

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

Quelle

2017-05-27 12:10:32

Hilfe brauchen eine effizientere für diesen

Antwort

Verwandte Themen