背景更改僅適用於Chrome + $ .preload不起作用

我製作了一個腳本，每8秒更換背景圖像。一切工作正常鉻，但在其他瀏覽器它沒有。（測試Safari，Edge，IE 9-11和Mozilla）。我也有jQuery預加載插件，但實際上並不預加載圖像。控制檯不顯示任何錯誤，所以我不知道爲什麼它不起作用。代碼：

var c = 1, 
    nimg = $('header .background .img').attr('data-bg'), 
    bgpath = $('header .background .img').css('background').match(/"(.*)"/), 
    imgpath, 
    imgs = [], 
    startpath, 
    startpoint, 
    selector = 'header .background .content .text', 
    time = 8000; 
if (path[1] == 'diwerf') { 
    startpath = '/'+path[1]; 
} else { 
    startpath = '/templates'; 
}; 
startpoint = bgpath[1].search(startpath); 
bgpath = bgpath[1].slice(startpoint); 

for (var g = 1; g <= nimg; g++) { 
    imgpath = bgpath.replace(/[0-9]/g, g); 

    imgs.push(imgpath); 
}; 

$.preload(imgs); 

function removeText() { 
    setTimeout(function() { 
     $(selector).fadeOut('slow', function() { 
      $(this).removeClass('animated').removeAttr('style'); 
     }); 
    }, time-600); 
} 

removeText(); 

setInterval(function() { 
    if (c == nimg) { 
     c = 0; 
    }; 
    c++; 
    bgpath = bgpath.replace(/[0-9]/g, c); 
    $('header .background .img').css('background', 'url('+bgpath+') center center no-repeat'); 

    setTimeout(function() { 
     $(selector+'-'+c).addClass('animated'); 
    }, 600); 

    removeText(); 
}, time+100);

它沒有做任何事情，甚至不添加「動畫」級。

在這裏你可以看到網站：http://www.testing.dw-erfolg.eu/

感謝您的幫助！

來源

2016-07-19 Jeremy

您正在使用一種速記的CSS屬性，這在所有瀏覽器中都不能保證。

bgpath = $('header .background .img').css('background').match(/"(.*)"/),

相反，你應該使用.css('backgroundImage')

請確保您還更改行42：

$('header .background .img').css('backgroundImage', 'url('+bgpath+')');

來源

2016-07-19 21:44:03 Dekel

您好，感謝您的幫助。另外，你知道爲什麼$ .preload不起作用嗎？ – Jeremy

您在該行之前發生錯誤，因此可能導致瀏覽器無法訪問該部分。進行更改並再次檢查。 – Dekel

它沒有工作，但沒關係。我用了別的東西。無論如何，謝謝！ – Jeremy

背景更改僅適用於Chrome + $ .preload不起作用

回答

相關問題