J'aimerai précharger mes images pour que quand je fais un hover dessus il n'y est pas le temps de chargement au premier :hover. Ce sujet est souvent évoqué mais peu de solution existe.
J'ai tenté de précharger en mettant sur le ::before l'url de mon image hover mais j'ai toujours un petit blanc la première fois le changement de background-image n'est pas fluide la première fois des avis, des solutions ?
Vous ne pouvez pas comprendre la récursivité sans avoir d’abord compris la récursivité
oui, on utilise souvent pour cela des sprites : une image qui contient les deux versions, et qu'on place via background-position. Mais avant d'aller plus loin j'aimerais en savoir plus sur ton besoin : tes images, que sont-elles ? Des boutons ? Des images de contenu qui changeraient au hover ?
Pas d'aide concernant le code par MP, le forum est là pour ça :)
oui, on utilise souvent pour cela des sprites : une image qui contient les deux versions, et qu'on place via background-position. Mais avant d'aller plus loin j'aimerais en savoir plus sur ton besoin : tes images, que sont-elles ? Des boutons ? Des images de contenu qui changeraient au hover ?
Désolé, en fait les sprites ne peuvent pas être utilisé car j'ai deux images de background qui habille le fond d'une div et l'image s'affiche au hover avec un effet de fondu (et c'est pour ça que je ne peux pas faire du multi background avec une position -9999px -9999px non plus ).
Et au premier hover j'ai toujours une latence le temps que l'image charge pour la première fois. J'ai essayé de charger l'image ailleur genre dans une div invisible mais le code fait deux requêtes différente.
Et le nav ne met en cache l'image en hover seulement après le premier hover donc je ne sais pas comment procéder (a savoir que je préfèrerai garder les images en bck-img plutôt que des img en dur en html mais si il n'y a pas de solution je ferai comme ça pas le choix :/ )
Edit : Les seules solutions que je n'ai pas testé c'est :
Modifier mon html et mettre les images de base en html et celle qui apparaisse au hover en background image et quand y a hover tout simplement cacher l'image du html avec un opacity et une transition. (facile à mettre en place mais j'aimerai ne pas toucher les background-image car elles sont déja stylé en css pour être toujours bien centré en fonction des res d'écran donc la flemme de refaire)
La solution JS je ne sais même pas si c'est associable avec les background-image sur le :hover j'ai l'impression qu'il sont optimisé pour ne pas charger d'image inutile donc de ne jamais charger l'image si le hover n'est jamais utilisé !!!
Voila voila, merci d'avance pour tes conseils ça fait un gros patté sry
- Edité par Mamashi 1 août 2017 à 15:30:46
Vous ne pouvez pas comprendre la récursivité sans avoir d’abord compris la récursivité
> j'ai deux images de background qui habille le fond d'une div et l'image s'affiche au hover avec un effet de fondu
Tu peux montrer ton HTML ? Et aussi un schéma de ce que tu cherches à obtenir ?
Yo désolé j'ai pas eu le temps de répondre avant. J'ai ma réponse, grosse perte de temps le préchargement fonctionne en fait c'est juste que la directive environment du serveur sur lequel je travaille était configuré en development et non pas en production donc pas de cache actif etc ... Donc voila désolé de la perte de temps !!!
Vous ne pouvez pas comprendre la récursivité sans avoir d’abord compris la récursivité
Pré-chargement background-image :hover
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)