[英]Changing background doesn't work in all browsers
I have a script that changes my background image every few seconds. 我有一个脚本,每隔几秒钟就会更改一次背景图片。 It works for me, however, some users reported that it's not working on Safari browsers.
它对我有用,但是,一些用户报告说它不适用于Safari浏览器。 I am using Chrome and it works great, but some of them also have problems on Google Chrome.
我使用的是Chrome,效果很好,但其中一些在Google Chrome上也有问题。 Any ideas what might cause this problem?
任何想法可能导致此问题?
changeBackground();
function changeBackground(){
var currentBackground = $("body").css("background-image");
setTimeout(function(){
if(currentBackground == 'url("http://example.com/images/new-home-page/woman.png")'){
$("body").css("background-image", 'url("/images/new-home-page/slajd2.png")');
}
else if(currentBackground == 'url("http://example.com/images/new-home-page/slajd2.png")'){
$("body").css("background-image", 'url("/images/new-home-page/slajd3.png")');
}
else if(currentBackground == 'url("http://example.com/images/new-home-page/slajd3.png")'){
$("body").css("background-image", 'url("/images/new-home-page/woman.png")');
}
changeBackground();
}, 6000);
}
Try to add a first default background image, probably in safari can't get the CSS url image for the first match: 尝试添加第一个默认背景图片,可能是在野生动物园中无法获取第一个匹配的CSS网址图片:
changeBackground();
function changeBackground(){
var currentBackground = $("body").css("background-image");
setTimeout(function(){
if(currentBackground == 'url("http://example.com/images/new-home-page/woman.png")'){
$("body").css("background-image", 'url("/images/new-home-page/slajd2.png")');
}
else if(currentBackground == 'url("http://example.com/images/new-home-page/slajd2.png")'){
$("body").css("background-image", 'url("/images/new-home-page/slajd3.png")');
}
else if(currentBackground == 'url("http://example.com/images/new-home-page/slajd3.png")'){
$("body").css("background-image", 'url("/images/new-home-page/woman.png")');
// ADD THIS ELSE
} else {
// SET THE FIRST AND DEFAUT BACKGROUND
$("body").css("background-image", 'url("/images/new-home-page/slajd2.png")')
currentBackground = 'url("/images/new-home-page/slajd2.png")';
}
changeBackground();
}, 6000);
}
The JSFiddle tried in safari for windows. JSFiddle在Windows的Safari浏览器中尝试过。
UPDATE UPDATE
Or you can use a safer way, use a counter instead of the css style like this: 或者,您可以使用更安全的方法,使用计数器而不是CSS样式,如下所示:
changeBackground();
var currentBackground = 0;
function changeBackground(){
setTimeout(function(){
console.log(currentBackground);
if (currentBackground == 0){
currentBackground = 1;
$("body").css("background-image", 'url("https://static.pexels.com/photos/7125/water-trees-lake.jpg")');
}
else if(currentBackground == 1){
currentBackground = 2;
$("body").css("background-image", 'url("https://static.pexels.com/photos/4243/black-and-white-forest-trees-branches.jpg")');
}
else if(currentBackground == 2){
currentBackground = 0;
$("body").css("background-image", 'url("https://static.pexels.com/photos/9159/pexels-photo.jpg")');
}
changeBackground();
}, 6000);
}
I think the problem is with url
standards 我认为问题在于
url
标准
use relative url instead: 使用相对网址:
changeBackground();
function changeBackground(){
var currentBackground = $("body").css("background-image");
setTimeout(function(){
if(currentBackground == 'url("/images/new-home-page/woman.png")'){
$("body").css("background-image", 'url("/images/new-home-page/slajd2.png")');
}
else if(currentBackground == 'url("/images/new-home-page/slajd2.png")'){
$("body").css("background-image", 'url("/images/new-home-page/slajd3.png")');
}
else if(currentBackground == 'url("/images/new-home-page/slajd3.png")'){
$("body").css("background-image", 'url("/images/new-home-page/woman.png")');
}
changeBackground();
}, 6000);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.