J'utilise une image load.gif en attendant le chargements des images d'un site.
le comble est que parfois l'image load.gif, elle même, peut être remplacée par un carré blanc à bord gris + icone selon le navigateur.
et ce pendant très peu de temps bien sûr (le temps qu'elle soit chargée tout simplement)
un client (très minimaliste) me demande s'il est possible de ne pas voir cette image par défaut.
je sais, c'est contre nature d'un site web.
mais ! ça m'intéresse tout de même.
une idée ?
<img class="loadsite" src="img/design/load_site.gif" />
est placée
après la balise général de mon site. <div class="site">
et avant la fermeture </body>
.loadsite est en position fixed
.site est en display : none;
côté javascript j'utilise
$(window).load(function(){
opensite();
});
function opensite(){
$('.loadsite').css('display','none');
$('.site').fadeIn(500);
}
Et l'affichage de l'image met du temps seulement eu premier chargement du site ou à chaque fois que l'on clique sur un bouton qui attend un chargement?
Seulement à la première visite de l'utilisateur.
ensuite le load.gif est sauvegardé en cache donc pas de soucis.
Je cherche peut-être à résoudre mon problème dans le mauvais sens.
Mon .gif est un load animé classic ( 7ko )
Même pour une première visite, tout navigateur devrait pouvoir l'affiché directement, non ?
Du coup, je pense que mon gif passe avant d'autres éléments niveau chargement.
Peut-être devrais-je chercher à mieux optimiser le chargement de ce gif
Faire en sorte qu'il soit le premier élément à être chargé par le navigateur.
1_ déjà mettre l'image juste après <body>
2_ voir côté javascript s'il n'y pas moyen de pointer le chargement sur cette image en premier.
- Messages postés
-
485
- Date d'inscription
- dimanche 15 février 2009
- Statut
- Membre
- Dernière intervention
- 4 juin 2013
4est placée
après la balise général de mon site. <div class="site">
et avant la fermeture </body>
.loadsite est en position fixed
.site est en display : none;
côté javascript j'utilise
$(window).load(function(){ opensite(); }); function opensite(){ $('.loadsite').css('display','none'); $('.site').fadeIn(500); }