Изображение мерцает при обмене с другим использованием jquery

У меня есть 2 изображения, которые я хочу показать в качестве альтернативы при загрузке страницы. Ниже приводится ссылка jsfiddle за то, что я хочу:Изображение мерцает при обмене с другим использованием jquery

http://jsfiddle.net/8mMZn/

HTML:

<span class="solar-panel" title="Solar Panel"></span>

CSS:

.solar-panel {position:absolute; left:280px; width:103px; height:83px;background:url(http://s28.postimg.org/q0ukhrf5l/solarpanel.png) no-repeat; } 
span.solar-panel-grey {background:url(http://s16.postimg.org/5kik3yfm9/solarpanelshine.png) no-repeat;}

JS:

$(window).load(function() { 
    HomePageAnimation.panelShine(); 
}); 

var HomePageAnimation = { 
    panelShine: function(){ 
     var index, timesRun, interval,solarPanel; 
     index =0; 
     timesRun = 0; 
     solarPanel = $("span.solar-panel"); 
     interval = setInterval(function(){ 
      timesRun += 1; 
      if(timesRun === 8){ 
       clearInterval(interval); 
      } 
      switch(index){ 
       case 0: 
        solarPanel.addClass("solar-panel-grey"); 
        index = 1; 
        break; 
       case 1: 
        solarPanel.removeClass("solar-panel-grey"); 
        index = 0; 
        break; 
      } 
     },600);  
    } 

};

2 изображения используется 1) solarpanel.png и 2) solarpanelshine.png

На странице отображается «солнечная панель». Когда вы запускаете страницу в первый раз, вы увидите, что первое изображение «солнечная панель» исчезает/мелькает один раз, а затем анимация смены изображений работает нормально. Когда вы снова запустите эту страницу, она будет работать нормально. Если вы очистите кеш (воспользуетесь хром - Ctrl + F5) и снова запустите, первое изображение снова исчезнет/снова мерцает. Как я могу избежать этого?

И это происходит только тогда, когда изображение подано с сервера, оно не происходит на локальном компьютере.

источник

2013-12-19 whyAto8

Вы можете избежать этого, поджимать оба изображения так, что к тому времени, когда обмен происходит, изображение уже загружено. –

Не могли бы вы дать мне несколько указателей на то, как это сделать? Кроме того, просто любопытно, почему это происходит. Первое изображение «solarpanel» уже присутствует на странице, а код js только переопределяет его другим изображением и удаляет одно и то же изображение за несколько циклов. Итак, почему первое изображение даже исчезает/мерцает перед так называемой анимацией. Есть идеи? – whyAto8

Какая анимация? –

Изображения CSS загружаются только в том случае, если они отображаются на странице, поэтому второе изображение не загружается, пока вы не измените класс в первый раз. Я бы разделил их на одно изображение и переключил фоновое положение, а не URL-адрес фонового изображения. Методика называется CSS спрайтов, и это хорошая практика для работы, так что стоит попробовать:

http://css-tricks.com/css-sprites/

источник

2013-12-19 16:56:53 thebiffboff

Спасибо человеку, я расскажу об этом в спрайте, я считаю, что его предварительная загрузка только по предложению Кевина в ответ на мой пост. – whyAto8

Прекрасно работает. :-) – whyAto8

Рад это услышать :) – thebiffboff

Вам необходимо предварительно загрузить изображение, чтобы он не мерцает.

http://jsfiddle.net/8mMZn/10/

$.fn.preload = function() { 
    this.each(function(){ 
     $('<img/>')[0].src = this; 
     console.log(this.src); 
    }); 
} 

$(window).load(function() { 
    $(['http://s28.postimg.org/q0ukhrf5l/solarpanel.png','http://s16.postimg.org/5kik3yfm9/solarpanelshine.png']).preload(); 
HomePageAnimation.panelShine(); 
//rest of code

источник

2013-12-19 17:07:17 Mike

Спасибо, Майк, я понял. Однако я нашел решение спрайта намного проще и чистым, поэтому я реализовал это, хотя оба решения выполняют одну и ту же цель. – whyAto8

Изображение мерцает при обмене с другим использованием jquery

ответ

Смежные вопросы