Question

编辑：

感谢Akshat和Jefferey的帮助和建议。我将用非常简单的术语重新提出我的问题：

当坐标发生变化时，如何让我的网页平滑地重新定位图像。应用程序每隔一分钟就会将协议写入服务器上的文件。我说顺利，因为我不想要用户干预或强制页面刷新（META HTTP-EQUIV = REFRESH CONTENT = 300），这很容易，但不是一个良好的用户体验。

我希望这是有道理的。再次感谢你。

我有一个带有图像的简单网页 - 地图 - 每分钟都会发生变化。地图每30秒动态更新一次，如下所示：

<script language="JavaScript">
<!--
function refreshMap1() {
   if (!document.images) return;
   document.images['map1'].src = 'map1.jpg?' + Math.random();
   setTimeout('refreshMap1()',30000);
}
//--></script>

然后：

<body onload=" setTimeout('refreshMap1()',30000)">
<img src="map1.jpg" name="map1">

这很好用。

我通过加载包含绝对定位的StyleSheet在地图上叠加动画gif，如下所示：

<link rel="stylesheet" type="text/css" href="position.css" />

然后：

<img src="animation.gif" class="pos1" id="a1">

css文件（position.css）只包含：

.pos1 { position: absolute; left: 300px; top: 400px; }

这也可以正常工作，但是.... css文件会每隔一分钟改变一次，就像地图一样，以反映gif的新位置。我希望通过以与地图类似的方式每30秒强制更新一次css来动态更改动画gif的位置。我无法找到强制动态定时更新css文件的方法。

有什么想法吗？

TIA。

Answer 1

您无需更改css文件。把它放在刷新功能中：

document.getElementById("a1").style.top = XXX+"px";
document.getElementById("a1").style.left = XXX+"px";

我希望这会有所帮助。

Answer 2

如果id或class在每个CSS文件中都是唯一的，您可以预先加载所有CSS，并每隔30秒更改一个标识符。 CSS文件很少太大。

动态加载CSS是可能的，但我真的不建议它;它违反了Web标准，并且欢迎潜在的安全问题。一种方法是将内容注入style标记，如下所示：

Loading page content and its CSS dynamically - how to prevent jump because CSS is not loaded yet?

最后一点，您可能应该为setTimeout函数使用字符串。使用匿名函数，或者如果函数是全局函数（在您的情况下是函数），则为函数的引用。例如，setTimeout(refreshMap1, 30000);可以替换setTimeout('refreshMap1()',30000);。

强制定时更新CSS文件

2 个答案: