I'm trying to load programmatically an img with a .gif extension. But the animation only happens once.
How can I add more img and see the animation every time I add a new img, not just the final state?
Note: I do not want a loop gif. I just want the next img to behave just like the first, animate then stop.
var topval = 10;
var right = 10;
var addStar = function() {
var img = $('<img id="'+topval+'">');
img.attr('src','https://s3-sa-east-1.amazonaws.com/musicamise/astronautAnimatedGif.gif');
img.attr('alt','alt'+topval);
img.css('position','absolute');
img.css('right', right+'px');
img.css('top', topval+'px');
img.appendTo('body');
topval = topval+10;
right = right+10;
};
$("#addStar").click(addStar);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body style="margin:0;padding:0;">
<button id="addStar">Click do add</button>
</body>Thanks in advance.
Your problem is because the browser takes the same cache image. When you change the URL of the image, it's like you're looking for another image. The downside of this is that he always makes a new request for the image.
var topval = 10;
var right = 10;
var count = 0;
var addStar = function(){
var img = $('<img id="'+topval+'">');
img.attr('src','https://s3-sa-east-1.amazonaws.com/musicamise/astronautAnimatedGif.gif?count='+count++ );
img.attr('alt','alt'+topval);
img.css('position','absolute');
img.css('right', right+'px');
img.css('top', topval+'px');
img.appendTo('body');
topval = topval+10;
right = right+10;
}
$("#addStar").click(addStar);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body style="margin:0;padding:0;">
<button id="addStar">Click do add</button>
</body>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments