前幾天我加入了深色模式，讓網頁可以有不同樣式，不過深色模式的背景圖不會在一開始就被加載，導致當使用者切換模式時，會閃過一個白畫面影響美觀，那有沒有辦法可以讓它在被使用前就先加載？
參考一些文章後我發現，有些瀏覽器是支援在背景預先取回資源的，在HTML中可以用link元素來做到，簡單紀錄一下常見的兩種屬性。

preload
強制瀏覽器優先載入必要的資源。通常用來提前加載目前頁面即將用到的資源。

prefetch
用來提前加載資源，跟preload不同的是prefetch會等頁面完全加載完後才開始加載。通常用來提前加載下個頁面，或是等一下才會用到的資源。

我需要的圖片在使用者點擊切換模式的按鈕後才會被使用，所以用prefetch關鍵字。

<link rel="prefetch" href=" sleep-d.webp " as=" image ">

已經載入的圖片會出現在開發人員工具的Source介面，而預先載入的圖片可以像下圖，到Application介面的Frames裡找到。

參考資料/延伸閱讀

1. MDN-Prefetch
2. medium
3. pjchender
4. php.cn