Précharger l'image de fond
Il y a des tonnes d'articles de comment pour le chargement d'une image, mais je n'arrive pas à trouver quelque chose d'utile sur le préchargement d'une image de fond avec jquery.
J'ai fait un html simple maquette de ce que j'aimerais obtenir:
http://jsfiddle.net/3rfhr/
- Un chargement div s'affiche
- Arrière-plan est chargé
- Chargement div disparaît
- Fond DIV apparaissent
Je peux gérer la div transitions mais je suis ignorant de la façon dont je devrais aller sur le préchargement d'un fond de css. Merci d'avoir lu ma question 🙂
OriginalL'auteur pufAmuf | 2011-12-27
Vous devez vous connecter pour publier un commentaire.
Vous ne pouvez pas, tant que c'est une image d'arrière-plan. Charger normalement et ensuite de définir l'image d'arrière-plan. Quelque chose comme ceci:
la dernière ligne est nécessaire dans certains navigateur au cas où l'image est mise en cache.
src
partie est repaced par l'url de l'image?oui,
src
est l'url de l'image, définissez ce que vous avez besoin. Chris Kempen, en réponse a une bonne idée dans la mesure où il est saisissant de la src à partir de la CSS, mais je ne suis pas sûr de ce que la 2ème ligne est pourPeut pas, c'est un mot fort. Vous pouvez charger l'image à l'aide du Fichier de l'Api et de définir l'attribut src de "data:image/gif;base64,...ma...codé...image" Voir mon post ci-dessous pour une référence à un autre post couvrant cette technique.
Hmm, peut-être que j'ai fait quelque chose de mal? jsfiddle.net/Zf7Jm/1
missing ) after argument list
Vous pouvez facilement faire un plugin jQuery par emballage de la plupart des code avec
$.fn.preloadImage = function(){ return this.each( function(){ ........ } ); }
et le remplacement de la fonction de charge avec quelque chose comme$self.trigger( 'loaded' )
-- notez que vous devez également éviter les double-appel de la fonction dans ce cas (la dernière ligne parfois double-appel de la fonction de rappel, mais ce n'était pas important dans ce cas donc je l'ai ignoré)OriginalL'auteur Mark Kahn
De faire la pose, pourquoi ne pas récupérer l'URL de la
css
attribut avec jQuery? Quelque chose comme ceci:url( ... )
)À la bande
url( ... )
de l'attribut css. Yep, pourrait certainement utiliser les regex, et autant que je sache, jQuery doit toujours vous donner une belle chaîne de valeur 😉Ouais, réalisé ça 🙂 Édité mon commentaire précédent à droite lorsque vous avez répondu, préoccupé par des espaces et/ou des citations.
Salut Chris, cela ressemble beaucoup! Si, désolé si cela semble stupide, mais pouvez-vous svp m'indiquer ce que j'ai fait de mal? jsfiddle.net/Zf7Jm/3
Donner votre
div
spécifiquewidth
etheight
dans le CSS, comme500px
pour à la fois la largeur et la hauteur, et cela devrait faire l'affaire 🙂OriginalL'auteur Chris Kempen
Voici un post de la semaine dernière qui a couvert le préchargement des images avec jQuery: HTML 5 de chargement de Fichier d'image comme image de fond d'écran
Et voici la solution que le post référencé: http://sveinbjorn.org/dataurls_css
OriginalL'auteur Mike Gwilt
Vous logique est presque bon, mais vous ne pouvez pas capturer des événements pour les CSS, jquery.
Vous avez besoin de charger l'image de fond à certains
<img>
élément. Attraper le cas de charge de l'élément et quand il est déclenché, vous modifier l'arrière-plan de l'image à celle de la src et de faire le reste de votre logique.OriginalL'auteur Bruno Costa
Préchargement des Images avec CSS et JavaScript, j'espère que ces deux lien pourrait être facile et utile.
http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/
http://perishablepress.com/press/2006/11/14/preloading-images-with-css-and-javascript/
OriginalL'auteur Sameera Thilakasiri
Un exemple de travail avec un faux
setTimeout
pour simuler le temps de chargement.Pertinentes jQuery code:
setTimeout
ne doit pas être utilisé pour cette...setTimeout
n'est là que pour simuler le temps de chargement et pour aucune autre raison.OriginalL'auteur Josh Smith