how to display same image multiple times using same image in javascript
Question
I want to display an image (for example: balloon) multiple times on a single page. I know I can do it by adding this
<img id="101" src="balloons.png" >
in .html as many images as I need using different id for each image. But all of their src will be same. Is there any other way around so that I can load the image only one time but can use as many copies of the same image as I want?
7 answers
solution1
1 2017-01-17 21:15:40
yes you can use this :
var image = new Image();
image.src = 'image src';
document.body.appendChild(image);
then you can call image where ever you want without load it again every time .
solution2
1 2019-04-03 12:49:11
You can add the for loop and create the object of image then append it to the body.
var img = new Image();
img.src = "./ImageName.png"
for (var i = 0; i < 10; i++) {
document.body.appendChild(img)
}
Note: It will give the image 10 times because I added the condition to display the images 10 times.
solution3
1 2019-04-24 07:00:23
Firoza Shaikh's answer is correct but in that the id of the image is not changing, it will be the same for every appended image. The OP needs different id for each image.
Here I added 10, so 10 copies will be made. Choose the number you want.
check the below snippet:
$(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>
solution4
0 2020-09-23 05:30:57
You can add the for loop and append image object to body inside for loop
function generateImg() {
for (var i = 0; i < 10; i++) {
$('body').append($('<img>',{id:"id" + i,src:'images/ImageName.png'}))
}
}
solution5
-1 2016-02-12 15:44:00
You could just create a while funtion and loop x times.
<script>
$(function(){
var i = 0;
while(i<100){
$("body").append("<img src='#'/>");
i++;
}
})
</script>
solution6
-1 2016-02-12 15:47:45
Make a function that generates a new image and call it when needed. The image is loaded once the first time it is inserted to the DOM. The browser caches it so it won't be downloaded on subsequent uses.
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()); }
solution7
-1 2016-02-12 16:10:57
A fun way to do it would be to use the element() CSS function:
.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>
The support for element() had decreased and most browsers have now dropped support completely, besides FireFox.
element() for now is deferred to CSS 4 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.