Drehe Hintergrund-URL alle 10 Sekunden

Question

Ich habe viele ähnliche Fragen gesehen, konnte aber keine Lösung finden. Ich habe ein Bootstrap-Jumbotron und einen Satz von 3 Bildern, um alle 10 Sekunden durchzulaufen. Das Problem ist, dass die erste URL erst nach Ablauf der ersten 10 Sekunden angezeigt wird. Nachdem das Array fertig ist, werden die Bilder korrekt wiedergegeben. Erst beim ersten Laden ist das Bild leer. Ich habe versucht, das Hintergrundbild über CSS und JQuery zu setzen, aber es gab immer noch Probleme mit dem Überspringen beim Laden des ersten Bildes.

Der Kodex

var jumbotronBG = ['/image1.jpg', '/image2.jpg', '/image3.jpg']; 
 
var changeImage = $(".jumbotron"); 
 
    var i = 0; 
 
    
 
setInterval(function() { 
 
    changeImage.css({'background-image': 'url(' + jumbotronBG[i] + ")"}); 
 
     i = i + 1; 
 
     if (i == jumbotronBG.length) { 
 
     i = 0; 
 
     } 
 
}, 10000);

<div class="jumbotron"> 
 

 

 
</div>

Nur müssen einen Weg Zyklus alle 3 Bilder mit der Faust zu sein image1.jpg beim Laden der Seite zu finden.

Answer 1

Ich sehe nichts falsch, außer nicht die background-image Änderung Last aufrufen? Geändert JavaScript-Code, dies zu beheben:

var jumbotronBG = ['https://placehold.it/100x100', 'https://placehold.it/200x200', 'https://placehold.it/300x300']; 
var changeImage = $(".jumbotron"); 
var i = 0; 

function cycleImage() { 
    changeImage.css({ 
    'background-image': 'url(' + jumbotronBG[i] + ")" 
    }); 
    i = i + 1; 
    if (i == jumbotronBG.length) { 
    i = 0; 
    } 
} 

setInterval(cycleImage, 1000); 
cycleImage(); 

This JSFiddle Werke, wie Sie richtig gedacht?