我的代码有一个动画 GIF(加载图像)
我从 Ajax 调用中获取变量“数据”中的 html 页面。
$("#content").html(data); // takes about 5 seconds and the GIF animation freezes since IE is single threaded.
有没有办法用 setTimeout/setInterval 函数逐行写入数据,让线程暂时释放,让动画继续播放?
fiddle 网址: http://jsfiddle.net/deepakssn/Kp2bM/
我尝试过的替代解决方案:
<style>
#loading {
background: url(loading.gif) no-repeat center center #fff;
display: block;
position: fixed;
height: 500px;
width: 500px;
}
</style>
<script src="../scripts/jquery.js"></script>
<script>
$(window).load(function () {
function writeData(data) {
var yourLines = data.split("\n");
for (var i = 0, j = yourLines.length; i < j; i++) {
var x = setTimeout(function() {
$("#content").append(yourLines[i]);
console.log("Line No :"+[i]+" "+Date.now());
}, 5000);
}
}
function ajaxLoad() {
$.ajax({
url: "test.txt"
}).done(function (data) {
console.log("success"+Date.now());
writeData(data);
//$("#content").html(data);
console.log("loaded data"+Date.now());
});
}
ajaxLoad();
});
</script>
<div id="loading"></div>
<div id="content"></div>
最佳答案
我在为我的一个项目添加“正在加载”指示器时遇到了这个问题。我用了this 这为我解决了问题。由于它不是图像,因此不会卡住。
关于javascript - 插入 DOM 时 IE 卡住 GIF 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17342687/