3

当我将文件加载到浏览器中时,我想向用户显示动画加载 gif。但是如果文件很大,浏览器看起来很忙,我的 gif 动画就不起作用。我可以做些什么来可视化加载?

HTML

<img id="loader" src="img/load.gif" />

JS

reader.readAsDataURL(file);
reader.onloadend = function(){
    document.getElementById('loader').style.display='none';
    var source = reader.result;
    document.getElementById('img').setAttribute( 'src', source);
}
document.getElementById('loader').style.display='block';
4

2 回答 2

0

从理论上讲,您所拥有的应该可以工作,因为读取操作是异步的。也许是阻塞执行的 onloadend 回调。无论如何,你可以试试这个:

reader.onloadend = function(){
    document.getElementById('loader').style.display='none';
    var source = reader.result;
    document.getElementById('img').setAttribute( 'src', source);
}
document.getElementById('loader').style.display='block';
// Make sure to start loading only after the loader was displayed
// (give the browser a chance to repaint)
setTimeout(function() {
    reader.readAsDataURL(file);
}, 40);
于 2013-05-11T20:56:40.603 回答
0

加载的事件应该首先被钩住。尝试这个:

reader.onloadend = function(){
    document.getElementById('loader').style.display='none';
    var source = reader.result;
    document.getElementById('img').setAttribute( 'src', source);
}
reader.readAsDataURL(file);

document.getElementById('loader').style.display='block';
于 2014-09-30T10:10:14.067 回答