javascript - Electron 在更新组件样式时意外工作

Question

下面的代码在浏览器中完美运行，但在 Electron 环境中却不行。

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 环境中，加载文件时，进度不会显示。

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

1. 如果我评论该image.onload = function() {...}块，它可以正常工作。

2. 如果我添加alert()事件onChange回调或startProgress函数，在警报后，进度会按预期显示。

3. 如果我clearProgress();在image.onload回调中发表评论，则在加载图像后，会出现进度。

因此，在图像加载之前，setAttributeandstyle.display似乎没有工作（或者 Electron 没有重新渲染页面），除非有警报干扰了这个过程。

我已将完整代码推送到GitHub (/lib/file.js)。

标签： javascriptelectron