Предустановленные изображения мигают с разной скоростью

Question

Я вызываю изображения из папки наугад и помещаю их в теги HTML img, используя функцию глобуса PHP.

Затем я использую JS, чтобы прочитать URL-адреса и перевернуть CSS-фоновое изображение div # wrapper, 300 мс для каждого изображения. Изображения должны быть предварительно загружены, так как они имеют теги HTML img. Они скрыты от пользователя с помощью следующего CSS (который не должен останавливать предварительную загрузку, как это делает «display: none»):

.visuallyhidden { 
    position: absolute; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 
    height: 1px; width: 1px; 
    margin: -1px; padding: 0; border: 0; 
}

Тем не менее, я испытываю непоследовательное / мигание изображений с различной частотой. Кажется, что изображения большего размера вызывают это, но изображения должны быть предварительно загружены, поэтому я не уверен, почему это происходит.

Мой JS выглядит так:

var slides = [];

$('.slide').each(function(index){
    slides.push($(this).attr('id'));
});

var slide = 0;

function changeImage(){
  if (slide < 10){
    var currentSlide = $("#" + slides[slide]);
      $('#wrapper').css('background-image', '');
        $('#wrapper').css('background-image', 'url("' + currentSlide.attr('src') + '")');
    slide++
    } else {
        $('#headline').removeClass('visuallyhidden');
        $('#wrapper').css('background-image', '');
        $('#wrapper').css('background-color', '#ef3308');
    }
}

setInterval(changeImage, 300);

Сайт http://robertirish.com.

Есть ли лучший способ сделать это / кто-нибудь может объяснить, почему это происходит?

Answer 1

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

CSS:

#wrapper{
  position: relative;
}

#wrapper img{
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

HTML:

<div id="wrapper">
  <img src="image1.png">
  <img src="image2.png">
  <!--etc-->
</div>

JS:

$(document).on('ready', function(){
  var images = [];
  $("img", "#wrapper").each(function(){
    images.push(this);
  });

  var timer = setInterval(function(){
    if (images.length)
      $(images.pop()).remove();
    else
      clearInterval(timer);
  }, 300);
});