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

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

Любые идеи? Вот пример:

gImages= [
    'assets/img/background/09.jpg',
    'assets/img/background/01.jpg',
    'assets/img/background/08.jpg'
];

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        (new Image()).src = this;
    });
}

preload(gImages);

var currentImage = 0;

var SwitchBackground = function() {
    var image = $('#intro');
    image.css("background", 
              "url('assets/img/background/'+gImages[currentImage]"') 
              50% 0 no-repeat fixed');


    currentImage++;

    if(currentImage == gImages.length)
    {
        currentImage = 0;
    }
};

window.setInterval(function() 
{
    SwitchBackground();
}, 1000);

О, еще одна вещь, которую я заметил, первая загрузка всегда от (инициатора) jquery-1.10.2.js:4112. При наведении мыши на инициаторе он говорит что-то о бутстрапах, которые также используются. После этого инициатор всегда один и тот же, jquery-1.10.2.js:7031. Любые идеи?

Изменить: jquery-1.10.2.js:7031 запускается вызовом switchBackground из моего кода.

Так что да, моя основная проблема — эффект мерцания, от которого я хочу избавиться :) Спасибо!


javascript flicker jquery preload
person krizajb    schedule 23.01.2014    source источник
comment
Когда запускается этот код js? он помещен в тег <script> внутри вашего заголовка? вы пытались запустить его внутри window.onload?   -  person Mabedan    schedule 24.01.2014
comment
в области $(document).ready(function())   -  person krizajb    schedule 24.01.2014
comment
вы пробовали window.onload вместо document.onready? это разные сигналы   -  person Mabedan    schedule 24.01.2014
comment
Это то же самое. Может быть, я ожидаю многого, я не уверен. Я раздену свою страницу и посмотрю, смогу ли я что-нибудь сделать с мерцанием.   -  person krizajb    schedule 24.01.2014
comment
Я снова думал об этом сегодня, дело в том, что ваша страница не будет ждать изображений, а просто вызовет их загрузку раньше. если вы хотите, чтобы он загружался полностью, вам нужно будет прослушать функцию загрузки каждого отдельного изображения, и как только все они будут загружены, активируйте свою страницу.   -  person Mabedan    schedule 24.01.2014
comment
Спасибо! Я это попробую. В настоящее время начал работать над чем-то другим, но обязательно свяжусь с вами.   -  person krizajb    schedule 27.01.2014

Ответы (2)


arrow_upward
2
arrow_downward 

if(currentImage == gImages.length)
{
     currentImage = 0;
     SwitchBackground();
}

Всякий раз, когда currentImage равно длине массива изображений, вы устанавливаете currentImage в 0 и принудительно переключаете фон, который конфликтует с вашим setInterval и, скорее всего, является причиной вашего мерцания.

person Ford    schedule 23.01.2014
comment
Исправил, но все так же :( - person krizajb; 24.01.2014

arrow_upward
1
arrow_downward

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

var count = 0;
function preload(arrayOfImages) {
   _.each(arrayOfImages, function(imageSource){
          var imageElement = new Image();
          imageElement.onload = function () {
              count++;
              if (count === arrayOfImages.length) {
                  tada();//here you activate your page
              }
          };
          imageElement.src = imageSource;
   });
}
person Mabedan    schedule 24.01.2014
comment
так что tada() - это мой $(document).ready(function() {}? Понятия не имею, как это использовать :) - person krizajb; 09.02.2014
comment
tada — это место, где вы показываете контент на своей странице. то, что я написал, входит в в ваш документ.onready - person Mabedan; 09.02.2014
comment
спасибо, тестирую: вот тестовая страница .. она все еще в процессе dreamon.si/test У меня работает, но некоторые говорят, что он все еще может мерцать случайным образом - person krizajb; 10.02.2014
comment
Я думаю, что ваш сервер все еще обслуживает старую версию, ту, что с простым циклом for - person Mabedan; 10.02.2014
comment
Там загрузил страницу с вашим кодом. У моего друга все еще проблемы.. он говорит, что загрузка изображений не в порядке, но все напутано, как будто предварительная загрузка вообще не работает :( И загрузка происходит с определенным интервалом, секунд 10, то есть. Может быть. вызов prev() вызывает проблемы или, может быть, параллакс? - person krizajb; 10.02.2014
comment
Код, кажется, отлично работает для меня, когда дело доходит до предварительной загрузки изображений. Он входит в if (count === imageArray.length) в нужное время. что касается снимка экрана, вам необходимо очистить кеш (или отключить его, если на то пошло) при тестировании такого рода операций, чтобы получать точные результаты каждый раз, когда вы тестируете - person Mabedan; 11.02.2014
comment
К сожалению, я не могу понять, что вызывает мерцание. Все, что я знаю, это то, что если сеть в инструментах разработчика Chrome не показывает загрузку следующего изображения, мерцания не происходит. - person krizajb; 16.02.2014