javascript - JS - readAsDataURL はブラウザのアクティビティをブロックします

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