为什么svg没有得到应用程序加载请求

Question

我有一个实时网站https://courageous-kulfi-58c13b.netlify.app/.每当点击复选框时，它都会变成绿色，并带有tick svg。然而，在第一次加载应用程序时，点击复选框会显示背景变绿和tick 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)",
},
}
}

Answer 1

您可以使用以下内容内联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>');
}

注意，我已经通过svgo运行svg来优化它

此处的示例：https://play.tailwindcss.com/TlRvKKs53I?file=css

预加载图像

另一种选择是在html头中预加载图像。

<link rel="preload" as="image" href="/Tick.svg">

老式的黑客方法是在页面的某个地方添加一个图像标签，但使用css使其不可见，但浏览器仍然会加载它