est-il possible de charger une image de fond asynchrone?
J'ai vu beaucoup jQuery plugins pour charger l'image normale de manière asynchrone, mais je ne trouve pas s'il est possible de Préchargement / Chargez asynchroneusement une image de fond. EDIT Je clarifie mon problème. Je travaille sur ce site de test http://mentialfaps.com/
L'image d'arrière-plan est chargée de manière aléatoire à partir d'un ensemble d'images rafraîchies chaque heure par un travail de chron (qui prend des images aléatoires sur un catalogue Flickr). L'hôte est libre et lent pour le moment, donc l'image de fond prend du temps à charger. Le positionnement de la première superposition (celle avec le logo mentalfaps transparent PNG) et la largeur sont réglementées par une fonction créée dans le Si vous essayez de rafraîchir la page de nombreuses fois, la largeur de la superposition droite div est 0 (et vous voyez donc un "trou" dans la mise en page) Voici la méthode pour définir mes positions: Le problème est que le Toute idée? jQuery (document) .Ready Construction. $ (fenêtre) .Width () est plus bas que la fenêtre effective largeur! Donc, la vérification échoue et le script va pour $ ('# superposition-droite'). Largeur (0);
7 Réponses :
Je ne sais pas si je comprends vraiment votre question, mais des images d'arrière-plan (et toutes les autres images) sont déjà chargées de manière asynchrone - le navigateur commencera à des requêtes séparées pour eux dès qu'il rencontre l'URL lors de l'analyse du HTML.
Voir cette excellente réponse à l'arrière-plan sur l'ordre de chargement: Séquence de charge et d'exécution d'une page Web?
Si vous vouliez dire autre chose, veuillez clarifier.
Le truc pour charger quelque chose dans l'arrière-plan est de le charger une fois, alors la prochaine fois qu'il est chargé, il est déjà dans le cache.
Mettez ce qui suit à la fin de votre HTML: < Pré> xxx
Vous pouvez utiliser un lien de préfetch dans la tête.
<link rel="prefetch" href="/images/background.jpg">
Comme il est déjà mentionné, l'image d'arrière-plan est chargée de manière asynchrone. Si vous devez charger l'image d'arrière-plan du code JQuery, vous pouvez également définir la méthode AddClass () pour définir une classe CSS ou ATTR ("style = \" arrière-plan-image: URL ('myImage.png') \ "") / p>
J'aime utiliser CSS pour remplir l'arrière-plan avec une couleur pour la charge de la page.
Après l'événement Dom Ready, j'utilise JQuery pour modifier le CSS et ajouter une image d'arrière-plan. De cette façon, l'image n'est pas chargée avant les charges de la page après. Pas sûr d'ASYNC, mais cette méthode donne à l'utilisateur une expérience décente.
Exemple: http://it.highpoint.edu/
Les liens de navigation latérale droite ont une image d'arrière-plan. La page initiale avec une couleur d'arrière-plan. Il est remplacé par une image d'arrière-plan après la charge de la page, via JQuery.
ive a trouvé la réponse moi-même, c'était un problème dû à la méthode J'ai eu les valeurs d'écriture à l'aide du .offset () qui a atteint parfois les mauvaises valeurs. .Position. () :
Le titre de la question ne correspond pas à la réponse. La question concerne le chargement de l'image asynchreusement.
changements dans ce fichier jquery.imageverlay.js
Définissez votre hauteur et votre largeur et profitez de cette ... p>
imageContainer.css({
width : "299px",
height : "138px",
borderColor : hrefOpts.border_color
});
Une fois qu'une image est mise en cache, tous les appels vers cette image du navigateur, quel que soit l'élément, appellera la version mise en cache jusqu'à ce que le cache expire.
Je suis sûr que toutes les images sont chargées de manière asynchrone.