Question

我要从文件夹中随机调用图像，然后使用PHP的glob函数将其放入HTML img标签中。

然后，我使用JS读取URL并翻转div＃wrapper的CSS背景图像，每个图像300ms。图片应预先加载，因为它们具有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);
});

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

1 个答案: