背景画像の変更のためにサファリに画像をプリロードする

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クラス：画像上onloadイベントの後、背景を変更する

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

} 
.header-2.bg3 { 

} 

Answer 1

はイメージが完全にロードされることを確認すべきですページ上の何かを更新する前に。

このアプローチでは、イベントが追加され、JSのバックグラウンド変更が保持されます。また、あなたはそれの部品を制御するために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 = 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>

。ここで私はちょうどこれはおそらく前に適切にロードしない画像に起因して、データセレクタに

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

を使用してCSSを経由してbackground-image（および任意の他）を制御し、あなたの間隔でdata-bg属性を設定しますスクリプトはonload（）関数を呼び出すことによって実行されています。