retarder le chargement d'une certaine image d'arrière-plan css

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 #big-menus'image d'arrière-plan, afin qu'il se charge après tout le reste, y compris toutes les images dans le HTML, et tous les autres fond de CSS (le some-menu et some-other-menu).

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

L'ordre de le mettre dans le CSS ou les occurrences du balisage (#big-menu) en HTML eu quelque chose à voir avec ce qui est chargé en premier ? ou est-il un moyen plus fiable pour contrôler ? javascript (jQuery de préférence) c'est bien.

  • Salut andy !
InformationsquelleAutor andyk | 2009-02-03
  1. 8

    De la commande dans le css n'a pas le contrôle, dont les ressources sont chargés en premier, mais ne touchent ce style existant est écrasé ou hérité.

    Essayer le JavaScript événement onload. L'événement s'exécute seulement une fois que la page est la fin du chargement.

    function loadBG(){
    document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)";
}
window.onload=loadBG();
    • serait-toutes les images et toutes les autres images de fond la fin du chargement lorsque cette fonction s'appelle ? l'événement onload, autant que je sache, est déclenché lorsque le HTML, pas les images, fini de se charger.
    • Le onload de l'événement est déclenché lorsque toutes les ressources sur la page a fini de loding, y compris les images et les iframes et les fichiers css et les fichiers javascript.
    • merci pour la clarification.
    InformationsquelleAutor Jason
  2. 4

    Ce ne serait pas une solution parfaite(comme c'est un css-fond et non d'une image), mais YUI chargeur d'Image fournit un bon moyen de chargement différé des images.

    Créer un groupe

    var imgGroup = new YAHOO.util.ImageLoader.group(window, 'load', 2);

    Après le document est chargé, de l'image à charger 2 secondes après. Voir Yahoo! Briller ou la exemples pour la démo.

    InformationsquelleAutor Alagu
  3. 4

    Une autre solution est de diviser vos actifs dans différents domaines, les navigateurs ne demande deux actifs à temps, puis d'attendre pour qu'une personne soit chargée avant de commencer le suivant. Vous pouvez observer ce avec Firebug et YSlow, plaçant la valeur de certains actifs sur images.example.com et images1.example.com et voir si cela a un impact

    • la bonne réponse. J'y ai pensé, mais il semblait plutôt lourd et n'est pas exactement possible dès maintenant, étant donné que je n'ai besoin que de retarder une image et je n'ai pas l'accès à la sous-domaines. Néanmoins, +1 🙂
    • Intéressant de noter pour 2013 que la plupart des navigateurs modernes de charge beaucoup plus actifs à un moment en même temps.
    InformationsquelleAutor Tom
  4. 2

    Je ne pense pas que le placement dans la styelsheet sera l'impact, comme l'ordre des éléments qui leur sont appliquées décidera de l'image qui va être 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, alors peut-être lieu d'ajouter une classe, une meilleure solution consisterait à ajouter le fond les 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");
    • Les Images qui sont référencés dans une feuille de style viendra à travers le fil, même si ils ne sont pas utilisés dans la mise en page. L'ajout d'une classe simplement en retard quand ils apparaissent.
    InformationsquelleAutor peirix
  5. 0

    De contrôle lorsqu'une image est chargée dans le CSS n'est pas vraiment possible. Vous pouvez essayer de le mettre tout en bas de votre feuille de style, mais je doute que vous verrez une amélioration.

    InformationsquelleAutor James
  6. 0

    L'ordre de téléchargement ne peut pas être contrôlé à l'aide de css. Cependant, vous pouvez utiliser javascript pour atteindre cet objectif.

    Bien que n'étant pas directement liées à la question peut-être avant de faire cela, vous devriez optmize l'image à l'aide de fusion.il ou votre image préférée du programme je trouve que les images jpeg à l'air très bien lors de l'enregistrement à la qualité de 85%. Expérience et n'oubliez pas de configurer votre serveur web pour mettre en cache les images pendant de longues périodes et puis le problème étant que la première fois que vos utilisateurs vont sur le site.

    InformationsquelleAutor Mon Villalon
  7. 0

    Jason Javascript astuce a fonctionné pour moi dans la résolution de ce problème. Cependant, j'ai dû corriger la syntaxe légèrement:

    function loadBG(){
    document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)";
}
window.onload=loadBG();
    • J'ai édité sa réponse pour contenir vos corrigé la syntaxe.
    InformationsquelleAutor Adam Walter