我有一個實時站點https://courageous-kulfi-58c13b.netlify.app/。每當單擊一個復選框時，它應該變成綠色并帶有一個勾號 svg。但是，在第一次加載應用程式時，單擊復選框將在背景變為綠色和實際顯示的刻度 svg 之間顯示明顯的延遲。NextJS 僅在我單擊復選框后才請求 svg。svg 在我的 css 中用作::before偽元素中的背景影像。如何在初始渲染中對 svg 發出下一個請求，以免出現這種延遲？
const Checkbox = (props: Props) => {
const [checked, setChecked] = useState(false);
const handleClick = () => {
setChecked((prevChecked) => !prevChecked);
};
return (
<>
<input
type="checkbox"
onClick={handleClick}
className={cn({
"before:bg-tick": checked,
})}
></input>
</>
);
};
tailwind.config.js
module.exports = {
extend: {
backgroundImage: {
tick: "url(/Tick.svg)",
},
}
}
uj5u.com熱心網友回復：
您可以使用以下內容行內 svg。然后下載svg就沒有延遲了。
.tick:before {
content: url('data:image/svg xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 342.357 342.357" style="enable-background:new 0 0 342.357 342.357" xml:space="preserve"><path d="M290.04 33.286 118.861 204.427l-66.541-66.52L0 190.226l118.862 118.845L342.357 85.606z"/></svg>');
}
注意我已經運行了 svgsvgo來優化它。
此處示例：https ://play.tai??lwindcss.com/TlRvKKs53I?file=css
預加載影像
另一種選擇是在 html 頭中預加載影像。
<link rel="preload" as="image" href="/Tick.svg">
老派的 hacky 方法是在頁面某處包含一個影像標簽，但使用 css 使其不可見，但瀏覽器仍會加載它。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/516151.html