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?
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?
Share Improve this question edited Feb 12, 2016 at 15:44 shadman_264 asked Feb 12, 2016 at 15:41 shadman_264shadman_264 411 gold badge2 silver badges5 bronze badges 2- Yes, there is. Have you written any Javascript? – sg Commented Feb 12, 2016 at 15:42
- 2 Possible duplicate of How can i clone an image in javascript – APAD1 Commented Feb 12, 2016 at 15:43
7 Answers
Reset to default 1yes 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 .
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.
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./images?q=tbn:ANd9GcRVliqjZDiZE5E_BBJhDZFxoUPY3YS3c3s3t41G9N0fIFHC1APS' id='myid"+i+"'/>";
$("body #myimg").append(img);
}
})<body>
<div id="myimg"></div>
</body>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>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'}))
}
}
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>
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./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());
}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 pletely, besides FireFox.
element() for now is deferred to CSS 4.