更改时背景图像闪烁

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中，通常不会提出要求。我会将您的函数重写为类似的内容。如本answer中所述。

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