javascript - 当我使用 background-image css 属性时在 div 中闪烁图像

Question

我的网页中有两个 div，这是用户可以选择的两个可能选项。我用 css(背景图像)设置每个 div 背景。图像是在网站加载时预加载的。有两种可能的状态，当一个选项被选中时xxx_image_enabled.png被设置为背景图片，当该选项未被选中时，xxx_image_disabled.png被设置为背景图片。在某些浏览器(Chrome)中它会闪烁一点。我使用 jQuery 设置背景图像属性。

CSS 看起来像这样:

.option-div{
     width: 70px;
     height: 70px;
     background-position: center;
     background-size: contain;
     background-repeat: no-repeat;
     margin: 0 auto;
}

知道闪烁的原因吗？刷新后消失。

Answer 1

尽量避免在脚本中设置原始样式，以保持代码不显眼和分离。您可以在 CSS 中设置背景图像，然后稍后在 jQuery 中更改它的值。

不确定您的 HTML 是如何设置的，但请确保您的 CSS 按 HTML 顺序在您的脚本之前加载。如果您的脚本首先加载，您将遇到一些渲染问题。把你的 <link>或 <style>在 <script> 之前使用它。

我只是猜测这些建议，因为我看不到 jQuery 代码。