Platzieren Bilder in Javascript

Ich hatte eine Frage zum Laden von Bildern in ein Array in JS und dann an verschiedene Orte auf Ihrer Website anhängen.Platzieren Bilder in Javascript

Lassen Sie uns sagen, dass ich einen Ordner mit 3 Bilder haben, die Ich mag würde in ein Array laden und legen Sie dann in dieser

<body> 

    <div id = "mainImage1"></div>    
    <div id = "mainImage2"></div>    
    <div id = "mainImage3"></div>    
</body>

Ist es möglich, die Bilder zu laden, zuerst in eine allgemeine Anordnung

Einstellung, und dann diese Bilder in ihre Divs legen?

So ähnlich? (Dieser Code ist falsch)

var mainImage1 = document.getElementById("mainImage1"); 
var mainImage2 = document.getElementById("mainImage2"); 
var mainImage3 = document.getElementById("mainImage3"); 

var mainImageSelection = new Image(); 

mainImageSelection.src = "Images/" + mainImageSelection[i]; 

mainImage1.appendChild(mainImageSelection[0]); 
mainImage2.appendChild(mainImageSelection[1]);

Quelle

2016-03-21 Theodore Steiner

tun Sie die Bilder um DOM oder Last in js und bringen Sie dann zu verschieben? – Martin

Sind die Bildnamen immer gleich, oder können sie sich ändern? Gibt es eine Beziehung zwischen imageName und divName? – Matthijs

Ich habe zuerst versucht, nur in JS zu laden und dann an verschiedene Teile der Website anzuhängen (ich hatte nur einige rudimentäre CSS erstellt, um die divs zu verschiedenen Teilen der Seite zu verschieben) –

Mehr dynamische Art und Weise, es zu tun:

var mainImage1 = document.getElementById("mainImage1"); 
var mainImage2 = document.getElementById("mainImage2"); 
var mainImage3 = document.getElementById("mainImage3"); 
var myArr = [mainImage1,mainImage2,mainImage3]; 
var images = ["https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg","https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg","https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg"] 

for(var i=0;i<myArr.length;i++){ 
var mainImageSelection = new Image(); 
    mainImageSelection.src = images[i]; 
    var div = myArr[i]; 
    div.appendChild(mainImageSelection); 
};

Geige [Beispiel] https://jsfiddle.net/h1t4vxy6/1/

Quelle

2016-03-21 14:06:13

Das ist eine wunderbar elegante Lösung. QQ: die letzte Zeile: div.appendChild (mainImageSelection); Wenn ich die divs in verschiedenen Bereichen der Website habe und ihre Platzierung von css kontrolliert wird, kann ich sie an alles anpassen, was ich will? –

genau @TheodoreSteiner –

Vielen Dank! –

Legen Sie einfach den folgenden Code in einer Schleife, den Index und div id Aktualisierung:

var elem = document.createElement("img"); 
elem.setAttribute("src", "Images/" + mainImageSelection[0]); 
elem.setAttribute("height", "768"); 
elem.setAttribute("width", "1024"); 
elem.setAttribute("alt", "Flower"); 
document.getElementById("mainImage1").appendChild(elem);

Quelle

2016-03-21 14:04:37 Itamar

var imgArr = []; 
 

 
var myImg = new Image(); 
 
myImg.src = "http://jstsolutions.net/wp-content/themes/realty/lib/images/key_img2.png"; 
 
imgArr.push(myImg); 
 

 
$("body").append(imgArr[0]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Quelle

2016-03-21 14:23:08 John

Hier ist eine Lösung mit einer gemeinsamen 'Onload'-Implementierung. Auf diese Weise können Sie alle Bilder gleichzeitig zum Dom hinzufügen, wenn alle geladen sind. Dies ist eine sauberere Möglichkeit, das Dom zu manipulieren.

var imageUrls = ['https://lh3.googleusercontent.com/MiUKb7zmiGyTbZDYl-GcqhwwgYKQTef6GlbqD8M09Iee4HKo-eZ_elDaDZWIjPt-QP6JdKmZb9gDlMd_rgOBsoKgdzpHneXqTA0IrSDl', 'https://lh3.googleusercontent.com/1I-SpxfmclQuLzrEeuVSskbwgcgDKrlTex_Lr7P9w_jpyyz-cblCIWhBaaotiTtZER30AheCW7TZLJebadC39_pCgxzcWQnwTQf01Gtz', 'https://lh3.googleusercontent.com/q9RXNZmgMHFxFCPX9iweCHhQsacan7g0_bswUe_GOy0W53iSeOxnLXcGkGUWPyR5K-qQBv7MtHEm-Ddzl0ja9C7L790P67LhTjGDJso']; 
 
var images = []; 
 

 
var loadedImages = 0; 
 

 
function onLoad() { 
 
    loadedImages++; 
 
    if (loadedImages === imageUrls.length) { 
 
    onAllImagesLoaded(); 
 
    } 
 
} 
 

 
function onAllImagesLoaded() { 
 
    var imagesContainer = $('.images'); 
 
    images.forEach(function(element, index) { 
 
    imagesContainer.append(element); 
 
    }); 
 
} 
 

 
imageUrls.forEach(function(element, index) { 
 
    var image = new Image(); 
 
    image.src = element; 
 
    image.onload = onLoad; 
 
    images.push(image); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="images"> 
 

 
</div>

Quelle

2016-03-21 14:37:11

Platzieren Bilder in Javascript

Antwort

Verwandte Themen