在Safari浏览器上预加载图像，以便更改背景图片。

40 浏览
0 Comments

在Safari浏览器上预加载图像，以便更改背景图片。

我的背景每12秒变化一次。\n在Chrome、Firefox和Opera中，背景的变化效果很好，但在Safari中，浏览器总是重新加载图片，这在第一次循环中每次图片变化时都会引起闪烁。有没有什么办法可以解决这个问题。\n这是我处理背景变化的方式：\n

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)

\nCSS类：\n

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

0

2 答案

0 Comments

这个问题的出现可能是由于在脚本执行之前图片没有正确加载导致的。通过调用函数onload()来解决这个问题。

0
0 Comments

问题出现的原因是在页面加载完成后，更改背景图片，但是如果图片加载比较慢，可能会导致背景图片还没加载完成就已经更改了。

解决方法是使用预加载图片的方式，即在更改背景图片之前，先将图片加载完成。可以通过创建一个新的Image对象，设置其onload事件，当图片加载完成后再更新背景图片。

具体实现的代码如下：

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'];
var count = 1;
var header2 = document.getElementsByClassName('header-2')[0];
setInterval(function() {
  var img2 = new Image();
  var url = bgs[count];
  img2.onload = function() {
    header2.style.backgroundImage = 'url(' + url + ')';
  }
  img2.src = url;
  (count < (bgs.length - 1)) ? count++ : count = 0;
}, 1000);

同时，还可以使用CSS来控制背景图片的更改。可以在interval中设置一个`data-bg`属性，然后使用CSS中的data选择器来控制背景图片的更改。

具体实现的代码如下：

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'];
var count = 0;
var header2 = document.getElementsByClassName('header-2')[0];
setInterval(function() {
  var img2 = new Image();
  var url = bgs[count];
  img2.onload = function() {
    header2.setAttribute('data-bg', count);
  }
  img2.src = url;
  (count < (bgs.length - 1)) ? count++ : count = 0;
}, 1000);

同时，通过CSS使用data选择器来控制背景图片的更改。

以上就是解决"Safari上预加载图片用于背景图片更改"问题的原因和解决方法。

0