retarder le chargement d'une certaine image de fond css

Question

dans un CSS comme ceci:

...
#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;
}
...

est-il un moyen de retarder le chargement de l'image de fond de #big-menu, de sorte qu'il charge après tout le reste, y compris toutes les images dans le code HTML, et tous les autres arrière-plan CSS (le et some-menu <= >).

La raison en est, grand-menu.jpg est très lourd en taille, et je veux qu'il soit chargé dernier. Après tout, il sert juste comme un eye-candy, et il y a d'autres images de fond qui ont une utilisation mieux que cela. (Tels que ceux utilisés dans les boutons)

Est-ce que l'ordre de le mettre en CSS ou les occurrences du balisage (some-other-menu) en HTML a rien à voir avec ce qui sera chargé en premier? ou est-il un moyen plus fiable pour le contrôler? javascript (jQuery préféré) est très bien.

Answer 1

L'ordre dans css ne contrôle pas les ressources sont d'abord chargés, mais n'affectent ce style existant est écrasé ou hérité.

Essayez l'événement onload JavaScript. L'événement exécute seulement après le chargement d'arrivée.

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

Answer 2

Cela pourrait ne pas être une solution parfaite (car il est un css-fond et non une image), mais Yahoo! ou les Briller exemples de rel="nofollow pour démonstration.

Answer 3

Une autre solution consiste à répartir vos actifs sur des domaines différents, les navigateurs ne demandera deux actifs à temps, puis attendre une à charger avant de commencer la suivante. Vous pouvez observer cela avec Firebug et YSlow , plaçant ainsi certains actifs sur images.example.com et images1.example.com et voir si cela fait un impact

Answer 4

Je ne pense pas que le placement dans le styelsheet affectera, comme l'ordre des éléments auxquels ils sont appliqués décidera quelle image sera chargé en premier.

Vous pouvez utiliser jQuery pour charger les images dans le bon ordre, bien que

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

EDIT: Ok, donc alors peut-être au lieu d'ajouter une classe, une meilleure solution serait d'ajouter l'arrière-plan-images dans l'exécution.

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

Answer 5

Contrôle lorsqu'une charge d'image en CSS est pas vraiment possible. Vous pouvez essayer de le mettre au fond de votre feuille de style, mais je doute que vous verrez une amélioration.

Answer 6

L'ordre de téléchargement ne peut pas être contrôlée en utilisant css. Cependant, vous pouvez utiliser javascript pour y parvenir.

Bien que pas directement lié à la question peut-être avant de faire que vous devriez l'image en Optimiser l'utilisation de l'aide smush.it ou votre programme d'image favori Je trouve que jpegs air très bien lors de l'enregistrement à la qualité de 85%. Expérience et ne pas oublier de mettre votre serveur Web pour les images de cache pendant de longues périodes et le problème sera juste la première fois que vos utilisateurs vont sur le site.

Answer 7

trick Javascript Jason a travaillé pour moi dans la résolution de ce problème. Cependant, je devais corriger légèrement la syntaxe:

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