如何在javascript中使用相同的图像多次显示相同的图像答案

【问题标题】：how to display same image multiple times using same image in javascript如何在javascript中使用相同的图像多次显示相同的图像
【发布时间】：2016-05-23 20:03:58
【问题描述】：

我想在一个页面上多次显示图像（例如：气球）。我知道我可以通过添加这个来做到这一点

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

在 .html 中，我需要为每个图像使用不同的 id。但是他们所有的 src 都是一样的。有没有其他方法可以让我只加载一次图像，但可以使用尽可能多的相同图像的副本？

【问题讨论】：

是的，有。你写过 Javascript 吗？
How can i clone an image in javascript的可能重复

标签： javascript html css image

【解决方案1】：

您可以只创建一个 while 函数并循环 x 次。

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

【讨论】：

while 不是函数，而是循环。
如果我对图像进行 id 识别，那么我可以使用 id 调用它，但在你的情况下，我该如何引用它们？
@ndugger，Erm，Mark 没有尝试编写函数？！？！？
@DavidWilkinson 也许你应该更专心，阅读他的代码上方的文字； “[...] 创建一个 while 函数 [...]”。
@shadman_264 不确定您在问什么？只需在 JS 中对图像进行硬编码即可。

【解决方案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());
}

【讨论】：

【解决方案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。

【讨论】：

【解决方案4】：

是的，你可以使用这个：

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

然后你可以在任何你想要的地方调用图像，而无需每次都重新加载它。

【讨论】：

【解决方案5】：

您可以添加 for 循环并创建图像对象，然后将其附加到正文。

   var img = new Image();
     img.src = "./ImageName.png"
    for (var i = 0; i < 10; i++) {      
        document.body.appendChild(img)
    }

注意：它会给图像10次，因为我添加了显示图像10次的条件。

【讨论】：

【解决方案6】：

Firoza Shaikh 的回答是正确的，但是图像的 id 没有改变，对于每个附加的图像来说都是一样的。 OP 需要为每个图像提供不同的 id。

这里我添加了 10 个，因此将制作 10 个副本。选择你想要的号码。

检查下面的sn-p：

$(document).ready(function(){
         
      for (var i = 0; i < 10; i++) {  
          var img = "<img src ='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVliqjZDiZE5E_BBJhDZFxoUPY3YS3c3s3t41G9N0fIFHC1APS' id='myid"+i+"'/>"; 
          $("body #myimg").append(img);
      }
    
})

<body>
<div id="myimg"></div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：

【解决方案7】：

您可以添加 for 循环并将图像对象附加到 for 循环内的 body

 function generateImg() {
   for (var i = 0; i < 10; i++) {
       $('body').append($('<img>',{id:"id" + i,src:'images/ImageName.png'}))
   }
}

【讨论】：