Question

我有一个每12秒更改一次的背景。在Chrome，Firefox和Opera中，背景更改工作正常，但在Safari中，浏览器始终会再次加载图像，并且会在第一个周期的每个图像更改时闪烁。关于如何解决这个问题的任何想法。

这就是我处理背景变化的方式：

var img2 = new Image();
var img3 = new Image();
img2.src="/img/bg2.png";
img3.src="/img/bg3.png";
Meteor.setInterval(function(){
    let elem = $(".header-2");
    if(elem.hasClass("bg1")){
        elem.removeClass("bg1");
        elem.addClass("bg2");
        let src = 'url('+img2.src.replace(location.origin,'')+')';
        elem.css("background-image", src);
    }
    else if(elem.hasClass("bg2")){
        elem.removeClass("bg2");
        elem.addClass("bg3");
        let src = 'url('+img3.src.replace(location.origin,'')+')';
        elem.css("background-image", src);
    }
    else{
        elem.removeClass("bg3");
        elem.addClass("bg1");
    }
}, 12*1000)

css课程：

.header-2.bg1 {
    background-image: url('/img/bg1.png');
}
.header-2.bg2 {

}
.header-2.bg3 {

}

Answer 1

在图像上发生onload事件后更改背景应确保在更新页面上的任何内容之前图像已完全加载。

此方法添加事件并在JS中保留背景更改。

var bgs = ['http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg', 'http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg','http://www.mrwallpaper.com/wallpapers/Huge-Bear.jpg'],
  count = 1,
  header2 = document.getElementsByClassName('header-2')[0];

setInterval(function() {
  var img2 = new Image(),
    url = bgs[count];
  img2.onload = function() {
    header2.style.backgroundImage = 'url(' + url + ')';
  }
  img2.src = url;
  (count < (bgs.length - 1)) ? count++ : count = 0;
},1000)

body {
  margin: 0;
}
.header-2 {
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  margin: 0;
  background-image: url('http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header-2"></header>

您也可以使用与您的代码相同的方法来控制其中的部分内容。在这里，我只是在您的时间间隔中设置data-bg属性，然后使用数据选择器通过CSS控制background-image（以及其他任何内容）

var bgs = ['http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg', 'http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg', 'http://www.mrwallpaper.com/wallpapers/Huge-Bear.jpg'],
  count = 0,
  header2 = document.getElementsByClassName('header-2')[0];

setInterval(function() {

  var img2 = new Image(),
      url = bgs[count];

  img2.onload = function() {
    header2.setAttribute('data-bg', count);
  }

  img2.src = url;

  (count < (bgs.length - 1)) ? count++ : count = 0;
}, 1000)

body {
  margin: 0;
}
.header-2 {
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  margin: 0;
  background-image: url('http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg');
}
.header-2[data-bg="1"] {
  background-image: url('http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg');
}
.header-2[data-bg="2"] {
  background-image: url('http://www.mrwallpaper.com/wallpapers/Huge-Bear.jpg');
}

<header class="header-2" ></header>

Answer 2

这可能是由于在执行脚本之前没有正确加载图像，通过调用onload（）函数可以解决问题。

在safari上预加载图像以更改背景图像

2 个答案: