JavaScript свойство Onload - PullRequest
Новая
       7

JavaScript свойство Onload

0 голосов
/ 17 апреля 2020

Я прочитал несколько сообщений, касающихся свойства onload. Насколько я понимаю, это не метод, не событие, слушатель события или триггер. Это просто пустой указатель на функцию, ожидающую назначения. Вот сокращенный скрипт. Он назначает функцию управления изображением по событию, а затем отображает изображение на веб-странице. Вместо назначения функции onload, которая является указателем на функцию. Почему я не могу просто выполнить функцию напрямую? Имею ли я здесь смысл? Спасибо 

var reader = new FileReader();

reader.onload = function(e) {
    var img = document.createElement("img");
    img.src = e.target.result;

    var canvas = document.createElement("canvas");

    ......

    dataurl = canvas.toDataURL(file.type);
    document.getElementById('output').src = dataurl;
}
reader.readAsDataURL(file);

Ответы [ 4 ]

0 голосов
/ 18 апреля 2020

Итак, по сути, OnLoad является обработчиком событий (или ссылкой на обработчик событий) для FileReader, когда он вызывается для дальнейшей обработки данных, когда FileReader завершает загрузку? Правильна ли моя интерпретация?

0 голосов
/ 17 апреля 2020

onload - это поле объекта FileReader , которое обрабатывает ссылку на функцию, которую вы хотите выполнить при загрузке нужного файла. По сути, это обратный вызов, который вызывается при срабатывании события load. Почему использовать этот шаблон и не выполнять функцию напрямую? Поскольку загрузка файлов является асинхронной задачей (которая инициализируется с readAsDataURL, readAsBinaryString, readAsArrayBuffer или readAsText).

0 голосов
/ 17 апреля 2020

Вы не можете вызвать функцию напрямую, потому что файлы загружаются асинхронно. Вы можете преобразовать код FileReader, чтобы он возвращал обещание, и затем вы можете использовать async / await, чтобы код выглядел так, как будто вы его прямо вызываете 

funciton readFileAsDataURL(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(e.target.result);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  };
}

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image():
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = url;
  };
}

async function foo() {
  const result = await readFileAsDataURL(file);
  const img = await loadImage(result);
  // you can now use img
  ......
}
0 голосов
/ 17 апреля 2020

В соответствии с MDN :

Свойство FileReader.onload содержит обработчик событий, который выполняется при запуске события загрузки, когда содержимое читается с помощью readAsArrayBuffer. , readAsBinaryString, readAsDataURL или readAsText доступны.

Таким образом, он выполняется после того, как чтение содержимого завершено, что вы выполняете, вызывая reader.readAsDataURL(file).

...