更改时背景图像闪烁

Question

我正在尝试使用以下脚本更改 div 的背景图像：

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

                }
$(document).ready(function(){
           var images = [];
           for( var i=0; i<8; i++){
                images[i] = 'imgs/'+i+'.png';
           }
           $(images).preload();
            var i = 0;
                setInterval(function(){
                $('.header').css({'background-image':'url(imgs/'+i%8+'.png)'});
                i++;
            }, 700);
    });

但是图像在 chrome 和 firefox 上都在变化时闪烁，tp 如何解决这个问题？

Answer 1

浏览器需要发出一个新请求来获取图像，并且在浏览器发出该请求时它会闪烁，以便您的预加载工作，您似乎从预加载图像中知道，但没有将图像附加到 dom 中，通常它不会要求的。 我会将您的函数重写为与此类似的函数。 正如这个答案中提到的。

preloadImages(images) {
    images.forEach((url) => {
       var img=new Image();
       img.src=url;
    }
}