So laden Sie alle hintergrund-Bilder auf einmal

Habe ich die erste Webseite und es haben einige hintergrund-Bildern, die Ineinander übergehen.

So, das problem ist, dass, wenn die Seite nicht im Cache computer auf den ersten, es dauerte einige Zeit, zum laden der nächsten Hintergrundbild auf überblenden-Effekt.

Irgendwelche Ideen, wie das laden aller Bilder auf einmal?

JSFiddle: https://jsfiddle.net/sawqo6j9/

JS:

var i=0;
var imghead=[
	"url(http://www.psdgraphics.com/file/abstract-mosaic-background.png)",
	"url(http://www.psdgraphics.com/file/colorful-triangles-background.jpg)",
	"url(http://www.mrwallpaper.com/wallpapers/gradient-background.jpg)"
	];

function slideimg() {
    setTimeout(function () {
        jQuery('body').css('background-image', imghead[i]);
        i++;
        if(i==imghead.length) i=0;
        slideimg();
    }, 6000);
}
slideimg();

CSS:

html, body {
     height: 100%;
} 

body {
     background: url(http://www.psdgraphics.com/file/abstract-mosaic-background.png) no-repeat center center fixed;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
     background-size: auto 100%;
    -webkit-transition: all 2s ease-in;
    -moz-transition: all 2s ease-in;
    -o-transition: all 2s ease-in;
    -ms-transition: all 2s ease-in;
     transition: all 2s ease-in;
     margin: 0;
     padding: 0;
    font-family: Arial;
    font-size: 14px;
    color: #fff;
    margin: 100px;
}

HTML:

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
    <p>There goes page content</p>
  </body>
</html>

Beziehen Sie sich auf die weiße Farbe, die passiert, nachdem das Bild?
Ja, genau. Aber es werde zeigt nur für die erste Zeit. Wenn alle Bilder geladen sind, ist alles gut.
Dies liegt daran, zunächst browser macht 3 Aufrufe laden die imgaes von 3 verschiedenen url. Ist es möglich, alle diese 3 Bilder und erstellen Sie ein sprite, dann Durchlaufen Sie?
Ja, es ist möglich, aber es ist eine gute Idee? Es gibt 6 Bilder, beide sind Größe über 3 MB und die Seite ist responsive - also auf unterschiedliche Weise, hintergrund lädt in verschiedenen Positionen und etc.
Ich Schreibe mein Ansatz, aber später auf, da hast du eine Spanne von 6 Sekunden konnte Sie laden alle Ihre Bilder separat und nur die anderen auszublenden, bis die Zeit kommt für Sie. Ich glaube, ein solcher Ansatz würde das problem lösen.

InformationsquelleAutor lituoklis13 | 2015-11-02

Für die Zwischenspeicherung hintergrund-Bilder, ich nehme in der Regel den Ansatz der Vorspannung Ihnen vom Bildschirm als <img> und entfernen Sie die container sind Sie geladen, wenn die Seite vollständig geladen ist :

#deposit {
  position: fixed;
  top: 100%;
}

$(function() {

var imghead = [
    "//www.psdgraphics.com/file/abstract-mosaic-background.png",
    "//www.psdgraphics.com/file/colorful-triangles-background.jpg",
    "//www.mrwallpaper.com/wallpapers/gradient-background.jpg"
    ];

$.each(imghead, function() {

    $('#deposit').append('<img src="' + this + '" alt="">');
});

$(window).on('load', function() {

    $('#deposit').remove();
});
});

Den #deposit element könnte entweder in das markup oder dynamisch Hinzugefügt :

$('body').append('<div id="deposit"></div>');

InformationsquelleAutor Shikkediel

Können Sie definieren, Sie in Vorspannung Container in der CSS.

#preload-01 { background: url("http://www.psdgraphics.com/file/abstract-mosaic-background.png") no-repeat -9999px -9999px; }
#preload-02 { background: url("http://www.psdgraphics.com/file/colorful-triangles-background.jpg") no-repeat -9999px -9999px; }
#preload-03 { background: url("http://www.mrwallpaper.com/wallpapers/gradient-background.jpg") no-repeat -9999px -9999px; }

Und fügen Sie Sie in Ihre HTML.

Fiddle

UPDATE: Man könnte hinzufügen, Sie als Bilder und entfernen Sie Sie, sobald Sie geladen werden, über eine .load() Funktion.

var i=0;
var imghead=[
    "http://www.psdgraphics.com/file/abstract-mosaic-background.png",
    "http://www.psdgraphics.com/file/colorful-triangles-background.jpg",
    "http://www.mrwallpaper.com/wallpapers/gradient-background.jpg"
];

$(imghead).each(function(key,val){
    $('body').append('<img class="preloader" src="'+val+'">');
    $('.preloader').load(function(){
        $(this).remove();
    });
});

function slideimg() {
    setTimeout(function () {
        jQuery('body').css('background-image', 'url('+imghead[i]+')');
        i++;
        if(i==imghead.length) i=0;
        slideimg();
    }, 6000);
}
slideimg();

Fiddle

Vielen Dank, diese Lösung ist gut, aber vielleicht gibt es eine Möglichkeit das mit javascript und nicht erstellen Sie zusätzliche Container.
Wie das? jsfiddle.net/sawqo6j9/10

InformationsquelleAutor timo

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.