Verzögern des Ladens eines bestimmten Hintergrundbild CSS

Question

in einem CSS wie folgt aus:

...
#big-menu {
    background: #fff url(../images/big-menu.jpg) no-repeat;
}
#some-menu {
    background: #fff url(../images/some-menu.jpg) no-repeat;
}
#some-other-menu {
    background: #fff url(../images/some-other-menu.jpg) no-repeat;
}
...

ist es eine Möglichkeit, das Laden von #big-menu des Hintergrundbild zu verzögern, so dass es nach allem, was sonst lädt, alle Bilder in HTML einschließlich, und jeden anderen CSS Hintergrund (die some-menu und some-other-menu).

Der Grund dafür ist, big-menu.jpg in der Größe sehr schwer, und ich mag es zuletzt geladen werden. Immerhin, es dient nur als Augenschmaus, und es gibt andere Hintergrundbilder, die eine bessere Nutzung als das haben. (Wie die, die in Tasten)

Ist die Bestellung sie in CSS oder die Vorkommen des Markup (#big-menu) in HTML-Code setzen bekam nichts mit dem zu tun, was zuerst geladen wird? oder gibt es eine zuverlässigere Art und Weise, sie zu kontrollieren? Javascript (jQuery bevorzugt) ist in Ordnung.

Answer 1

Die Reihenfolge in CSS nicht kontrolliert, welche Ressourcen zuerst geladen werden, aber beeinflussen, was vorhandene Stil überschreibt oder vererbt wird.

Versuchen Sie, das JavaScript Onload-Ereignis. Das Ereignis wird nur ausgeführt, nachdem die Seite Finish Laden ist.

function loadBG(){
    document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)";
}
window.onload=loadBG();

Answer 2

Dies könnte nicht eine perfekte Lösung sein (wie es ein CSS-Hintergrund und kein Bild ist), aber Yahoo! Glanz oder der Beispiele Demo.

Answer 3

Eine andere Lösung ist Ihr Vermögen über verschiedene Domänen aufgeteilt, Browser nur anfordert zwei Vermögenswerte zu Zeit für einen warten dann vor dem Start des nächsten geladen werden. Sie können diese mit beobachten Firebug und YSlow , Platzierung so einige Vermögenswerte auf images.example.com und images1.example.com und sehen, ob das einen Einfluss macht

Answer 4

Ich glaube nicht, Platzierung in der styelsheet es auswirken wird, da die Reihenfolge der Elemente, auf die sie angewendet werden, wird darüber entscheiden, welches Bild zuerst geladen wird.

Sie können jQuery verwenden, um die Bilder in der richtigen Reihenfolge zu laden, obwohl

$('firstElement').addClass('some-menu');
$('secondElement').addClass('some-other-menu');
$('lastElement').addClass('big-menu');

EDIT: Okay, also dann vielleicht stattdessen eine Klasse hinzuzufügen, eine bessere Lösung wäre es, die Hintergrund-Bilder in der Laufzeit hinzuzufügen.

$('firstElement').css("background-image", "some-menu.jpg");
$('secondElement').css("background-image", "some-other-menu.jpg");
$('lastElement').css("background-image", "big-menu.jpg");

Answer 5

Controlling, wenn ein Bild lädt in CSS nicht wirklich möglich ist. Sie könnten versuchen, es ganz am Ende des Stylesheet setzen, aber ich bezweifle, werden Sie sehen eine Verbesserung.

Answer 6

Die Reihenfolge des Download kann nicht mit CSS gesteuert werden. Sie können aber Javascript verwenden, um dies zu erreichen.

Obwohl es nicht direkt auf die Frage im Zusammenhang vielleicht, bevor Sie, dass Sie das Bild unter Verwendung smush.it oder für Dein Programm optimieren können sollen ich feststellen, dass JPEG-Dateien sehr gut aussehen, wenn sie bei 85% Qualität gespeichert. Experiment und vergessen Sie nicht, Ihre Web-Server-Cache-Bilder für längere Zeit zu setzen und dann wird das Problem nur das erste Mal der Benutzer auf die Website gehen.

Answer 7

Jasons Javascript Trick funktionierte für mich, dieses Problem zu lösen. Allerdings hatte ich die Syntax leicht zu beheben:

function loadBG(){
     document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)";
}
window.onload=loadBG();