Question

我的网页上有两个div，这是用户可以选择的两个选项。我用css（background-image）设置每个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;
}

知道导致闪烁的原因吗？刷新后它会消失。

Answer 1

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

不确定您的HTML是如何设置的，但要确保在HTML命令中的脚本之前加载CSS。如果首先加载脚本，则会出现一些渲染问题。将<link>或<style>放在使用它的<script>之前。

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

Answer 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

//只是为了让你知道，如果你把它设置为假，假它会跳过事件并直接转到完成的结果，在这种情况下动画不会触发。

另外，考虑使用if语句来阻止事件被调用（如果事件已经激活）。

考虑：

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

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

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

2 个答案: