पृष्ठभूमि छवि परिवर्तन के लिए सफारी पर छवियों को प्रीलोड करना

Question

मेरे पास एक पृष्ठभूमि है जो हर 12 सेकंड में बदलती है। क्रोम, फ़ायरफ़ॉक्स और ओपेरा में पृष्ठभूमि परिवर्तन ठीक काम करता है, लेकिन सफारी में ब्राउज़र हमेशा छवि को फिर से लोड करता है और यह पहले चक्र पर प्रत्येक छवि परिवर्तन पर झटके से देखा जाता है। इस समस्या को हल करने के तरीके पर कोई विचार।

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) 

सीएसएस वर्गों:

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

} 
.header-2.bg3 { 

} 

Answer 1

छवि पर एक 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'], 
 
    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>

आप भी अपने कोड जहां आप इसे के कुछ हिस्सों को नियंत्रित करने के सीएसएस का उपयोग कर रहे साथ ही विधि का उपयोग कर सकते हैं। यहाँ मैं सिर्फ अपने अंतराल में एक data-bg विशेषता निर्धारित करते हैं, तो पर नियंत्रण background-image (और जो कुछ भी) डेटा चयनकर्ता

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

यह संभवतः है का उपयोग कर छवियों के कारण सीएसएस के माध्यम से पहले ठीक से लोड नहीं फ़ंक्शन ऑनलोड() को कॉल करके स्क्रिप्ट निष्पादित की जा रही है() चाल चलती है।