[英]Animated loader gif not spinning
我有一個帶有一些javascript的簡單html文件，該文件需要一些時間才能運行，並且我想在用戶等待時顯示一個動畫加載程序gif。 問題是動畫不起作用。 我嘗試了一些解決方案。 其中一些來自堆棧溢出，但實際上沒有任何作用。 我僅限於使用IE8。
有人知道一個可行的解決方案嗎？
我的代碼：
<html>
<head>
<script type="text/javascript">
function RunAndShow() {
document.getElementById("circularG").style.display = "block";
window.setTimeout(function () {
var j = 0;
for (var i = 0; i < 2000000000; i++) {
j = i;
}
alert("done");
}, 1500);
}
</script>
</head>
<body>
<div id="circularG" style="width:200px;height:200px;display:none; background-image:url(ajax-loader.gif)">
</div>
<table>
<tr>
<td>
<a href="#" onclick="RunAndShow()">Run & Show</a>
</td>
</tr>
</table>
</body>
</html>
由於您在RunAndShow內部進行了長時間的for循環，因此JS進程變得很忙。 因此，它阻止了瀏覽器中的UI線程。 這是預期的行為。
您可以使用網絡工作者來運行長時間運行的計算。 但是由於您限於IE8，因此無法使用。
一種選擇是使用setInterval / setTimeout並每次都部分執行繁重的計算，以使UI線程不會阻塞。
function RunAndShow() {
document.getElementById("circularG").style.display = "block";
window.setTimeout(function () {
var computed = 0, process = 500, total = 10000000000, j;
var interval = setInterval(function() {
while(computed < process && process < total ) {
j = computed;
computed++;
}
process += 500;
if(process >= total) {
clearInterval(interval);
alert("done");
}
}, 10); // increase the delay
}, 1500);
}
這是一個帶有許多要加載的GIF動畫的網站： http : //preloaders.net/它們都可以在IE8中使用。
window.location.href導致動畫gif加載器在Firefox中凍結
[英]window.location.href causing animated gif loader to freeze in Firefox
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.