更改時背景圖像閃爍

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;
    }
}