Индикатор выполнения отображается ТОЛЬКО в веб-инспекторе?

Question

Я использую javascript и D3 для выполнения некоторой визуализации данных. У меня есть текстовый файл, содержащий данные, которые я хотел бы визуализировать. Я написал код JS, который позволяет мне загружать файл и генерировать визуализацию.

Вот урезанная версия моего JS кода:

function readInputFile(evt) { 
    var f = evt.target.files[0]; 

    if (f) { 
     var r = new FileReader() 

     r.onload = function(e) { 

     // Generate the visualization 

     } 

     r.readAsText(f); 

    } else { 
     alert("Failed to load file"); 
    } 
} 

document.getElementById('InputFile').addEventListener('change', readInputFile, false); 

До сих пор, поэтому стандарт.

Теперь, чтобы сделать его более удобным, я хочу добавить загрузчика, например http://www.w3schools.com/howto/howto_css_loader.asp, который будет отображаться при создании визуализации.

Я заметил, что если я создаю погрузчик в функции OnLoad, никогда не отображается загрузчик:

function readInputFile(evt) { 
    var f = evt.target.files[0]; 

    if (f) { 
     var r = new FileReader() 

     r.onload = function(e) { 

     d3.select("body") 
     .append("div") 
     .attr("id", "loader") 
     .attr("class", loader) 

     // Generate the visualization 

     d3.select("#loader").remove() 

     } 

     r.readAsText(f); 

    } else { 
     alert("Failed to load file"); 
    } 
} 

document.getElementById('InputFile').addEventListener('change', readInputFile, false); 

Однако, если я создаю загрузчик за пределами функции OnLoad, я вижу погрузчик:

function readInputFile(evt) { 
    var f = evt.target.files[0]; 

    d3.select("body") 
     .append("div") 
     .attr("id", "loader") 
     .attr("class", loader) 

    if (f) { 
     var r = new FileReader() 

     r.onload = function(e) { 

     // Generate the visualization 

     d3.select("#loader").remove() 

     } 

     r.readAsText(f); 

    } else { 
     alert("Failed to load file"); 
    } 
} 

document.getElementById('InputFile').addEventListener('change', readInputFile, false); 

Но вещи действительно становятся странными для меня, когда я открываю веб-инспектора. Чтобы выяснить, что происходит, я установил некоторые точки останова в JS-коде, который создает загрузчик внутри функции onload. Но когда я запускаю этот код с открытым веб-инспектором, я вижу загрузчика! Я не понимаю, почему я вижу загрузчика, когда я нахожусь в веб-инспекторе, но не тогда, когда я запускаю код без него ...

Я использую Google Chrome для запуска моего JS-кода. Я googled о создании баров прогресса для загрузки файлов, и я вижу много материала об использовании JS с AJAX. Я думаю, что AJAX может быть излишним для того, что я хочу сделать, но я новичок в JS, поэтому я не могу быть уверен. Кроме того, это не объясняет, почему то, что я вижу в веб-инспекторе, отличается от того, когда я просто запускаю код без него.

Благодарим за помощь!

Августин

Answer 1

onload это событие срабатывает, когда файл полностью загружен. Возможно, загрузчик будет удален сразу после его рендеринга. Не уверен, что открытие веб-инспектора повлияло бы на это, если только это не означает, что те точки останова, о которых вы упомянули, вступают в силу. Я думаю, что вы хотите использовать методы onloadstart и onloadend. возможно, onprogress, чтобы обновить статус индикатора выполнения. Однако не знаю, какая поддержка для этих методов. https://developer.mozilla.org/en-US/docs/Web/API/FileReader