相关疑难解决方法(0)

是否可以通过HTML 5 File API加载图像并使用javascript/jquery使其成为css背景图像？如果有可能,它是如何完成的？

我有一个每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 {

}