Arka plan görüntüsü değişimi için resimleri safari üzerinde ön yükleme

Question

Her 12 saniyede bir arka planı değiştiren bir arka planım var. Chrome, Firefox ve Opera'da arka plan değişikliği gayet iyi çalışıyor, ancak Safari'de tarayıcı her zaman görüntüyü yeniden yükler ve ilk döngüde her görüntü değişiminde bir titreme ile fark edilir. Bu sorunu nasıl çözebileceğime dair herhangi bir fikir.

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 sınıfları:

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

} 
.header-2.bg3 { 

} 

Answer 1

görüntü sağlamalıdır görüntü üzerinde bir onload olaydan sonra arka planını değiştirme tamamen dolu olduğu

Bu

Ben arka plan değişikliğini hallediyorum nasıl sayfadaki herhangi bir şeyi güncellemeden önce.

Bu yaklaşım olayı ekler ve arka plandaki değişiklikleri JS'de tutar.

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>

Ayrıca bölümlerini kontrol etmek CSS kullandığınızı koduyla aynı yöntemi kullanabilirsiniz. İşte ben sadece kontrol, sonra aralığında bir data-bg özelliğini ayarlamak background-image (ve başka ne) nedeniyle görüntülere veri seçici

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

bu muhtemelen olduğunu kullanılarak CSS ile daha önce düzgün yüklenmemesi betiği çalıştırılarak çalıştırılıyor onload() hile yapacaktır.