Управление фоновым изображением с использованием JQuery, вызывающего мерцающий вид эффекта

Question

Follwing - это часть скрипта, который я использую для создания слайдера путем изменения фонового изображения для каждого объекта изображения, который у меня есть для цикла времени.

 #Sliderimg - height is 500px, 

     $("#Sliderimg").css({ 
      "background-image": "url(../Images/" +SliderImageObj.image + ")", 
      "display": "block", 
      "z-index": "50px" 
     }); 

Что могло бы пойти не так с этим, поскольку я получаю мерцающий эффект каждый раз, когда меняю изображение. Моя проблема связана не с новым изображением, загружаемым, его мерцанием (миганием в нижней части экрана) для старого изображения, которое должно быть заменено.

Answer 1

Возможно, удалите «px» из вашего атрибута z-index? Он принимает десятичные значения.

Answer 2

Вы видите мерцание, потому что каждый раз, когда вы меняете фоновое изображение, ваш браузер должен загрузить его, прежде чем он сможет отобразить фон. Если изображения не слишком большие (более чем, скажем, 5kb), вы можете попробовать кэшировать их в браузере, применив их к элементам, где они не будут отображаться.

Кроме того, 50px не является допустимым индексом z, для этого свойства требуются только целые числа.

Answer 3

браузер вынужден перерисовать весь фон.

Как это делается, устанавливая фон на белый, а затем перерисовывая новый фон.

использовать jquery.animate(), чтобы сразиться с этим.

Answer 4

У меня была такая же проблема на днях. Как ни странно, в FF казалось, что все в порядке, но мерцает в IE, Chrome, а иногда и Safari. Решение состоит в том, чтобы использовать лист спрайтов css. Вы создаете изображение, которое имеет оба фона рядом друг с другом. Вы показываете только часть фона. вы переключаете его, регулируя границу на фоне. Вы можете обрабатывать корректировки полей с помощью addClass и removeClass. Ниже код, смотрите здесь скрипкой: http://jsfiddle.net/fMhMY/

CSS

.navButton span{ 
width:32px; 
height:32px; 
display:block; 
} 

a.leftButton span, a#leftButton span{ 
background-image:url(Prev.png); 
background-position:-64px 0px; 
} 

/*nav button sprites */ 

/*sprite order is pushed, hover, natural */ 

a.leftButton.navOver span, a.rightButton.navOver span{ 
background-position:-32px 0px; 
} 

a.leftButton.navPressed span, a.rightButton.navPressed span{ 
background-position:0px 0px; 
} 

HTML

<div style='display:inline-block'> 
    <a href="javascript:void(0);" class="leftButton navButton" id='lefty'> 
     <span></span> 
    </a> 
</div> 

JQuery

$('.leftButton').mousedown(function() { 

     $('.leftButton').addClass('navPressed'); 
     console.log('mousedown'); 

}); 
$('.leftButton').mouseup(function() { 
     $('.leftButton').removeClass('navPressed'); 
     console.log('mouseup'); 
}); 

$('.leftButton').hover(function() { 
     $('.leftButton').addClass('navOver'); 
     console.log('hover'); 
}); 


$('.leftButton').mouseout(function() { 
     $('.leftButton').removeClass('navPressed').removeClass('navOver'); 
     console.log('mouseout'); 
});