🖼️

Electron+React環境でbackground-imageの表示ラグ問題を解決する

2023/04/27に公開

以下の記事にCSSのbackground-imageに指定した画像の初回表示が遅れる問題の解決策が記載されていました。

ですが、Electronで同様の問題を解決したい場合、ローカルにあるCSSは遅延読み込みが出来ませんでした。Electron内部で使用されているChromiumが<link>タグのhref属性としてローカルのパスを読み込めない^[1]ためです。

解決策

結論としては、HTMLファイルで読み込めないので.tsxや.jsxファイルで直接読み込んでしまえばよいです。

上記記事と同じく、事前に読み込んでおきたい画像を列挙した以下のようなCSSファイルを用意します。

preload.css

html:after {
    content: "";
    background-image: url(./path/to/local/one.png),
        url(./path/to/local/two.png),
	...
}

Reactの場合、これをApp.tsxなど、最初の方に読み込まれる.tsx（.jsx）ファイルで直接importします。

App.tsx

import "./preload.css"; // ここでimportする

export const App = () => {
  // 以下略
}

脚注