Question

下面的代码可在浏览器中完美运行，但不适用于Electron env。

function listenFileInput() {
  fileInput.addEventListener('change', ev => {
    startProgress();

    const file = ev.target.files[0];
    if (!file) return clearProgress();

    loadImage(file);
  });
}

function loadImage(file) {
  const image = new Image();

  image.onload = function() {
    const src = cropImage(this);
    cardImage.src = src;
    clearProgress();
  };

  image.src = window.URL.createObjectURL(file);
}


function startProgress() {
  fileBtn.setAttribute('disabled', true);
  fileInput.setAttribute('disabled', true);
  progress.style.display = 'flex';
}

function clearProgress() {
  fileBtn.removeAttribute('disabled');
  fileInput.removeAttribute('disabled');
  progress.style.display = 'none';
}

在Electron env中，加载文件后，进度不会显示。

经过一些测试，我发现了一些有趣的现象：

如果我对image.onload = function() {...}块进行注释，则它可以正常工作。
如果我在alert()事件回调或onChange函数中添加startProgress，则发出警报后，进度将按预期显示。
如果我在clearProgress();回调中评论image.onload，则在加载图像后，将显示进度。

因此，除非加载了警报，否则setAttribute和style.display似乎在加载图像之前不起作用（或者Electron没有重新渲染页面）。

我已将完整的代码推送到JSON spec（/lib/file.js）。

Electron意外地工作以更新组件的样式

0 个答案: