JS - readAsDataURL阻止瀏覽器活動

當我將一個文件加載到瀏覽器中時，我想向用戶顯示一個動畫加載gif。但是，如果文件非常大，瀏覽器看起來很嘈雜，那麼我的gif動畫就不起作用了。我可以做什麼來可視化加載？JS - readAsDataURL阻止瀏覽器活動

HTML

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

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

來源

2013-05-11 poppel

爲什麼你刪除[前一個問題（http://stackoverflow.com/questions/16499969/js-readasdataurl-blocks-animated-gif）和剛剛重新發布了同樣的問題一個分鐘後？ – 2013-05-11 20:39:21

我無法編輯標題，對不起，我很笨拙 – poppel 2013-05-11 21:18:46

從理論上講，你應該有什麼樣的工作，因爲讀操作是異步的。也許這是阻止執行的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-11 20:56:40 bfavaretto

thanx，我檢查了一下，gif動畫簡短，然後停止，當加載開始 – poppel 2013-05-11 21:23:55

我懷疑瓶頸是加載一個巨大的數據URL到IMG元件。嘗試使用畫布代替。 – bfavaretto 2013-05-11 22:01:03

當我使用畫布時，它也靜止不動，但加載速度更快 – poppel 2013-05-11 22:27:22

加載的事件應該先掛鉤。試試這個：

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-30 10:10:14 Batist

JS - readAsDataURL阻止瀏覽器活動

回答

相關問題