背景更改仅适用于chrome+$.预加载不适用;不起作用

Background-change works only in chrome + $.preload doesn't work

本文关键字：加载 不适用 不起作用 chrome+ 适用于 背景      更新时间：2023-09-26

我制作了一个脚本，每8秒更改一次背景图像。在chrome中一切都很好，但在其他浏览器中则不然。（在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/

谢谢你的帮助！

您使用的是简写的CSS属性，这在所有浏览器中都不能保证。

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

相反，您应该使用.css('backgroundImage')

确保您也更改了第42行：

$('header .background .img').css('backgroundImage', 'url('+bgpath+')');
相关文章：