Précharger les images à l'aide de css

Est-ce une façon acceptable pour le chargement d'images, par rapport à certains code js à l'intérieur de html /head

body:after{
    display:none;
    content:
    url(img1.jpg)
    url(img2.jpg)
    ...
}

js façon

$.preload = function() {
  for (var i = 0; i < arguments.length; i++) {
    $("<img />").attr("src", arguments[i]);
  }
}

$.preload("img1.jpg","img2.jpg");
Bien que dans votre question, vous avez comparé le CSS vs, JS précontrainte méthodes. Je suis l'aide de certaines images généré dynamiquement, un fragment HTML, et viens de découvrir que pour moi, le CSS preloader a été la bonne façon d'obtenir des images mises en cache.
Votre CSS méthode fonctionne pour moi, merci.

OriginalL'auteur qadenza | 2014-06-22

  1. 3

    Je suppose que la méthode de travail, tant que l'image n'est pas généré dynamiquement. Le seul problème avec le préchargement en utilisant simplement CSS semble être que le téléchargement des images À la page, pas plus. Vous pouvez déclencher les événements JavaScript après le pageload.

    Pour en savoir plus: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

    Merci, ton lien est très utile pour moi.
    Le lien est rompu. Pouvez-vous mettre à jour votre réponse?
    Le lien fonctionne pour moi.

    OriginalL'auteur ndm13

  2. 8

    Le concept derrière cela est de placer les images d'arrière-plan sur un pseudo-élément qui est chargé lorsque la page se charge mais n'est pas affiché. Cela provoque le navigateur de charger les images de sorte que quand ils sont appelés plus tard par un autre élément qu'ils sont prêts à aller.

    Ceci peut être utilisé pour précharger les images et les échanger sur le vol stationnaire. Le "précharger" div n'a pas de hauteur/largeur, puisque les images sont fixés à l'arrière-plan, de sorte qu'il n'apparaît pas sur la page, et les images sont prêtes quand vous voulez les échanger sur le vol stationnaire. (il faudra bien entendu régler la hauteur/largeur sur les ancrages. Je suis juste montrer minimale CSS ici pour obtenir le point à travers)

    HTML:

    <div id="preload"></div>
<div id="icons">
    <a href="http://..." class="button-1"></a>
    <a href="http://..." class="button-2"></a>
    <a href="http://..." class="button-3"></a>
</div>

    CSS:

    #preload  {background: url('pic1b.png'), url('pic2b.png'), url('pic3b.png');}
.button-1 {background: url('pic1a.png');}
.button-2 {background: url('pic2a.png');}
.button-3 {background: url('pic3a.png');}
.button-1:hover {background: url('pic1b.png');}
.button-2:hover {background: url('pic2b.png');}
.button-3:hover {background: url('pic3b.png');}

    Évidemment, il existe de nombreuses autres façons, et le post ci-dessus partagé un lien qui incluent de nombreux autres.

    http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

    pourquoi display inline? C'est par défaut, n'est-ce pas? Et pourquoi width:0 et height:0? ne Serait pas mieux d' display:none?
    Le "précharger" div n'a pas de hauteur/largeur, puisque les images sont fixés à l'arrière-plan, de sorte qu'il n'apparaît pas sur la page, et les images sont prêtes quand vous voulez les échanger sur le vol stationnaire.
    J'ai publié un excellent exemple, s'il vous plaît laissez-moi savoir si ça a été utile
    Oui, vos efforts sont vraiment utiles pour moi, et je upvoted, merci beaucoup, mais j'ai déjà accepté le ndm13 de réponse.

    OriginalL'auteur imbondbaby

  3. 1

    Sur firefox, au moins, les images ne sont pas mise en cache avec display: none. Au lieu de cela, vous pouvez définir:

    body:after {
width: 0; height: 0; overflow: hidden; display: block;
content:    url('img1')
            url('img2')
            ...;
}

    OriginalL'auteur bur