Comment les images pré-charge en utilisant uniquement CSS (pas JS)?

Question

Comment puis-je les images pré-charge uniquement à l'aide CSS, sans l'aide de JavaScript? Il doit être multi-navigateur.

Je ne veux pas utiliser des sprites CSS. Y at-il une autre solution?

Answer 1

Vous pouvez utiliser plusieurs éléments, cachés avec background-position: -1000px -1000px; et leur donner une background-image pour chaque image que vous souhaitez effectuer une pré-charge.

• Vous pouvez en lire plus ici

Answer 2

Utilisez CSS Sprites .

Answer 3

Vous pouvez essayer de les charger avant tout la balise body fin et ne pas les afficher. Ensuite, si vous les appelez plus tard ils devraient être dans le cache si vous utilisez le même chemin exact.

<img src="/i/myimage.jpg" alt="image preload" style="display:none;" />

Vous pouvez également faire une classe avec affichage:. Et ne l'appliquer à toutes les images que vous souhaitez précharger ainsi

encourrait plus de demandes HTTP et que si vous voulez réduire ceux que je suggère sprites CSS si ce jamais vous concerne.