Question

我正在尝试加载以编程方式 img扩展名.gif。但动画只发生一次。

如何添加更多img并在每次添加新img时查看动画，而不仅仅是最终状态？

注意：我不想要循环gif。我只是希望下一个img的行为与第一个一样，然后停止动画。

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>

提前致谢。

Answer 1

您可以通过在URL中附加随机查询字符串参数来解决此问题。这使得浏览器每次都认为图像不同。例如：

https://s3-sa-east-1.amazonaws.com/musicamise/astronautAnimatedGif.gif?x=' + Math.random()

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?x=' + Math.random());
	   	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.

Answer 2

您的问题是因为浏览器采用相同的缓存图像。当您更改图片的网址时，就像您正在寻找其他图片一样。这样做的缺点是他总是对图像提出新的要求。

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 3

创建一个div
将您的gif设置为div的背景图片：

$('myDiv').css('background-image', 'url(' + imageUrl + ')');

使用动画动态添加gif图像

3 个答案: