Question

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

来实现

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

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

Answer 1

是的，你可以使用它：

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

然后你可以在任何地方调用图像而不必每次都加载它。

Answer 2

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

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

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

Answer 3

Firoza Shaikh的回答是正确的，但是图像的ID不变，因此每个附加的图像都相同。 OP需要为每个图像使用不同的ID。

检查以下代码段

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

Answer 4

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

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

Answer 5

你可以创建一个while功能并循环x次。

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

Answer 6

创建一个生成新图像的函数，并在需要时调用它。第一次将图像插入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 7

有趣的方法是使用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>

除了FireFox之外，对element()的支持已经减少，而且大多数浏览器现在完全放弃了支持。

element()目前是deferred to CSS 4。

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

7 个答案: