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) и повторно опубликовать один и тот же вопрос, только один минуту спустя? –

Я не мог отредактировать заголовок, извините, я очень неуклюж. – poppel

В теории, что у вас есть должны работать, так как операция чтения асинхронным. Возможно, это обратный вызов 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

Я подозреваю, что узкое место загружает огромный URL-адрес данных в img элемент. Вместо этого попробуйте использовать холст. – bfavaretto

Он также стоит на месте, когда я использую холст, но загрузка выполняется быстрее – poppel

Загруженное событие должно быть подключено первым. Попробуйте это:

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 блокирует активность браузера

ответ

Смежные вопросы