Bilder auf Safari vorladen für Hintergrundbildänderung

Question

Ich habe einen Hintergrund, der sich alle 12 Sekunden ändert. In Chrome, Firefox und Opera funktioniert die Hintergrundänderung zwar einwandfrei, aber in Safari lädt der Browser das Bild immer wieder neu und das wird bei jedem Bildwechsel im ersten Zyklus durch ein Flackern bemerkt. Irgendwelche Ideen, wie ich dieses Problem lösen kann.

Dies ist, wie ich den Hintergrund ändern bin Umgang:

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) 

Die CSS-Klassen:

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

} 
.header-2.bg3 { 

} 

Answer 1

den Hintergrund nach einem onload Ereignis auf das Bild Ändern der Bild sicherzustellen, sollte vollständig geladen ist bevor Sie etwas auf der Seite aktualisieren.

Dieser Ansatz fügt das Ereignis hinzu und behält die Hintergrundänderungen in JS bei.

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>

Sie können auch die gleiche Methode mit Ihrem Code verwenden, wenn Sie mit Hilfe von CSS sind Teile davon zu steuern. Hier Ich habe nur ein data-bg Attribut in Ihrem Intervall, dann ist die Kontrolle background-image (und was sonst) über CSS mit dem Datenselektor

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

dies ist möglicherweise auf Bilder nicht richtig vor dem Laden Skript wird ausgeführt, indem die Funktion onload() aufgerufen wird.