在safari中预加载图像以改变背景图像[重复]

This question already has an answer here:

这个问题已经有了答案:

Preloading images with jQuery 20 answers
用jQuery 20个答案预加载图像
Preload background image 6 answers
预加载背景图像6答案

I have a background that changes every 12seconds. In Chrome, Firefox and Opera the background change is works fine, but in Safari the browser always loads the image again and that is noticed by a flickering on every image change on the first cycle. Any ideas on how can I solve this problem.

我的背景每12秒就会改变一次。在Chrome中，Firefox和Opera的背景变化都很正常，但是在Safari浏览器中，浏览器总是会再次加载图像，并且在第一个周期的每个图像上都有变化。有什么办法可以解决这个问题吗?

This is how I'm handling the background change:

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

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)

The css classes:

css类:

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

}
.header-2.bg3 {

}

2 个解决方案

#1

Changing the background after an onload event on the image should ensure the image is completely loaded before updating anything on the page.

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

This approach adds the event and keeps the background changes in JS.

这种方法添加事件并在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>

You can also use the same method with your code where you're using CSS to control parts of it. Here I just set a data-bg attribute in your interval, then control the background-image (and whatever else) via CSS using the data selector

您还可以在使用CSS控制部分代码的代码中使用相同的方法。这里我只是在您的间隔中设置一个data-bg属性，然后使用数据选择器通过CSS控制背景图像(以及其他)

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>

#2

this is possibly due to images not loading properly before the script is being executed by calling the function onload() will do the trick.

这可能是由于调用函数onload()在执行脚本之前没有正确加载图像。

#1