预加载的图像以不同的速率闪烁

Question

我从一个文件夹中随机调用图像，并使用 PHP 的 glob 函数将它们放入 HTML img 标签中。

然后我使用 JS 读取 URL 并翻转 div#wrapper 的 CSS 背景图像，每张图像 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);
});