Question

当我将文件加载到浏览器中时，我想向用户显示动画加载的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';

Answer 1

理论上，你所拥有的应该是有效的，因为read操作是异步的。也许是阻止执行的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);

Answer 2

应首先挂载已加载的事件。试试这个：

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';

JS - readAsDataURL阻止浏览器活动

2 个答案: