当我将一个文件加载到浏览器中时,我想向用户显示一个动画加载 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';
最佳答案
理论上,您所拥有的应该可以工作,因为读取操作是异步的。可能是 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);
关于javascript - JS - readAsDataURL 阻止浏览器事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16500621/