Размещение изображений в Javascript

У меня возник вопрос о загрузке изображений в массив в JS, а затем добавлении их в различные места на ваш сайт.Размещение изображений в Javascript

Скажем, у меня есть папка с 3 изображениями, которые я хотел бы загрузить в массив, а затем поместить в эту настройку

<body> 

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

Можно ли загружать изображения, первый в общий массив, а затем поместить эти изображения в свои div?

Как это выглядит? (Этот код некорректен)

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

источник

2016-03-21 Theodore Steiner

вы хотите переместить изображения вокруг DOM или при загрузке в JS, а затем прикрепить? – Martin

Являются ли имена изображений одинаковыми или же они могут меняться? Есть ли связь между 'imageName' и' divName'? – Matthijs

Я пытался сначала загрузить JS, а затем подключиться к различным частям веб-сайта (я создал только некоторые рудиментарные css для перемещения divs в разные части страницы) –

Более динамичный способ сделать это:

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

fiddle [пример] https://jsfiddle.net/h1t4vxy6/1/

источник

2016-03-21 14:06:13

Это удивительно элегантное решение. QQ: последняя строка: div.appendChild (mainImageSelection); Если у меня есть divs в различных разделах сайта, и их размещение под управлением css, я могу поместить их в любой div, который я хочу? –

точно @ TheodoreSteiner –

Большое вам спасибо! –

Просто поместите следующий код в цикле, обновляя индекс и Div ID:

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

источник

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>

источник

2016-03-21 14:23:08 John

Это решение с общей реализацией «onload». Таким образом вы можете добавить все изображения одновременно в dom, когда все они загружены. Это более чистый способ манипулирования dom.

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>

источник

2016-03-21 14:37:11

Размещение изображений в Javascript

ответ

Смежные вопросы