当我使用背景图像 css 属性时，在 div 中闪烁图像答案

【问题标题】：Flashing image in div when I use background-image css property当我使用背景图像 css 属性时，在 div 中闪烁图像
【发布时间】：2013-08-31 12:22:19
【问题描述】：

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

css 看起来像这样：

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

知道是什么原因导致闪烁吗？刷新后消失。

【问题讨论】：

创建一个小提琴。这将有助于理解问题。
你能粘贴你的jquery代码吗？

标签： javascript jquery html css

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

很可能是 jQuery 导致事件重复。为了解决这个问题，我建议在函数中使用 jQuery .stop。

考虑：

$("#option-div").stop(true,false).animate({ //this is assuming you are using animate, swap this out for the event you are using

//只是为了提醒您，如果您将此设置为 false,false 它将跳过事件并直接进入完成的结果，在这种情况下动画不会触发。

此外，如果事件已经处于活动状态，请考虑使用 if 语句来防止调用事件。

考虑：

if($("#option-div").not(':animated')){
else { // your code here

如果你提供你的 jQuery 代码会更容易理解问题并帮助你，我会评论但还没有 50 个代表。

【讨论】：