Как отобразить одно и то же изображение несколько раз, используя одно и то же изображение в javascript

Question

Я хочу показать изображение (например: воздушный шар) несколько раз на одной странице. Я знаю, что могу это сделать, добавив этот

<img id="101" src="balloons.png" > 

в .html столько изображений, сколько мне нужно, используя различные идентификатор для каждого изображения. Но все их src будут такими же. Есть ли другой способ, чтобы я мог загружать изображение только один раз, но могу использовать столько копий того же изображения, сколько хочу?

Answer 1

Вы можете просто создать время funtion и цикл x раз.

<script> 
     $(function(){ 
     var i = 0; 
     while(i<100){ 
     $("body").append("<img src='#'/>"); 
     i++; 
     } 
     }) 
    </script> 

Answer 2

Создайте функцию, которая генерирует новое изображение и вызывает его при необходимости. Изображение загружается при первом вводе в DOM. Браузер кэширует его, поэтому он не будет загружен при последующем использовании.

var imgSrc = 'http://lorempixel.com/100/100'; 
 

 
function generateImage() { 
 
    var img = document.createElement('img') 
 
    img.src = imgSrc; 
 
    
 
    return img; 
 
} 
 

 
for (var i = 0; i < 20; i++) { 
 
    document.body.appendChild(generateImage()); 
 
}

Answer 3

Интересный способ сделать это будет использовать функцию element() CSS:

.target { 
 
    width: 400px; 
 
    height: 400px; 
 
    background: -moz-element(#gradient-background) no-repeat; 
 
} 
 
.gradient-background { 
 
    width: 1024px; 
 
    height: 1024px; 
 
    background-image: linear-gradient(to right, blue, orange); 
 
} 
 
.hide { 
 
    overflow: hidden; 
 
    height: 0; 
 
}

<div class="target"></div> 
 

 
<div class="hide"> 
 
    <div id="gradient-background"></div> 
 
</div>

Поддержка element() уменьшилась и большинство браузеров теперь полностью отказались от поддержки, кроме FireFox.

element() на данный момент deferred to CSS 4.

Answer 4

да, вы можете использовать это:

var image = new Image(); 
image.src = 'image src'; 
document.body.appendChild(image); 

, то вы можете вызвать изображение, где когда-либо вы хотите без нагрузки снова каждый раз.