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

how to display same image multiple times using same image in javascript

本文关键字：图像 显示 JavaScript      更新时间：2023-09-26

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

<img id="101" src="balloons.png" >
.html我需要为每个

图像使用不同 id 的图像。但是他们所有的src都是一样的。有没有其他方法，以便我只能加载一次图像，但可以根据需要使用同一图像的任意数量副本？

是的，你可以使用这个：

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

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

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

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

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

Firoza Shaikh 的答案是正确的，但由于图像的 id 没有变化，因此每个附加的图像都是相同的。OP 需要为每个图像提供不同的 ID。

在这里我添加了 10 个，因此将制作 10 个副本。选择所需的号码。

检查以下代码片段：

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

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

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

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

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

创建一个生成新图像并在需要时调用它的函数。 映像在首次插入 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());
}

一个有趣的方法是使用 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()现在推迟到 CSS 4。

相关文章：